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

Question

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

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

Answer 1

tl;dr

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

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

例子

col-xs-1 如果 flex: 1; 指定的 0 的 flex-basis 会像 col-xs-12 一样增长，如果它是唯一的 child，如果有另一个像这样的col-xs-1作为兄弟姐妹，那么它会像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>

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

Flexbox grow and shrink property columns vs determined width columns for responsive grid system

css

grid-system

flexbox

responsive-design

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

Flexbox grow and shrink property columns vs determined width columns for responsive grid system

css

grid-system

flexbox

responsive-design

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