css - Flexbox 增长和收缩属性列与响应式网格系统的确定宽度列

Question

最近我一直在学习 flexbox 以及如何制作我自己的网格系统。当使用 float 制作网格系统时，我们确定每个布局的列数和每列的宽度百分比。但是在使用 flexbox 时，我看到的所有布局教程都只是简单地使用 flex-direction: row; 和 flex: 1 对于列，使所有列大小相等，间距相等，居中并排成一行。但是当我查看 github 上的 flexboxgrid 源代码时，他们使用与 bootstrap 3 相同的原理。他们有针对不同屏幕尺寸的列，12 列和 flex-grow，shr​​ink 是禁用。相反，每一列都由宽度百分比确定，例如 col-xs-1 max-width: 8.33%。

现在我想知道这两种技术之间有什么区别，哪一种更可取。我的意思是确定每列的宽度需要大量计算，而使用 flex grow 属性只是用相同大小的列和间距满足主轴上的整个视口(viewport)。

Answer 1

tl;dr

它们不是实现相同结果的技术，它们做不同的事情。

---

Flexbox grid使用 flex-basis 来确定 flex 容器主轴的 width。它不在 flex 项上使用 flex: 1;，因为这等同于 flex: 1 1 0;。这意味着 flex-basis 的值为 0， flex 元素的大小将与指定的增长和收缩因子成比例，两者的值为 1。

---

示例

col-xs-1 的 flex-basis 为 0 指定自 flex: 1; 会像 一样增长>col-xs-12 如果它是唯一的 child ，如果有另一个 col-xs-1 作为 sibling ，那么它会像 一样成长col-xs-6 等等。

预计每个 col-xs-1 将填充容器的 1/12，(8.33333333%)，这使用 flex: 1; 就不是这种情况了。

* {
  box-sizing: border-box;
}
article {
  margin-bottom: 1rem;
}
[class^="col-"],
[class*="col-"] {
  flex: 0 0 auto; /* flex-grow: 0; flex-shrink: 0; flex-basis: auto; */
}
.row {
  display: flex;
  margin-right: -.5rem;
  margin-left: -.5rem;
}
.col-xs-1 {
  padding-right: .5rem;
  padding-left: .5rem;
  flex-basis: 8.33333333%;
}
.box-row {
  min-height: 1em;
  background: #007FFF;
}
article:last-of-type .col-xs-1 {
  flex: 1;  /* Same as flex: 1 1 0; */
}

<article class="row">
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
</article>

<article class="row">
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
  <section class="col-xs-1">
    <div class="box-row"></div>
  </section>
</article>