1

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

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

4

1 回答 1

1

tl;博士

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

Flexbox 网格用于flex-basis确定widthflex 容器的主轴。它不用于flex: 1;弹性项目，因为这相当于flex: 1 1 0;. 这意味着flex-basis的值为0，弹性项目的大小将与指定的增长和收缩因子成正比，两者的值都是1。

例子

col-xs-1具有0指定 from的 flex-basisflex: 1;会像col-xs-12它是唯一的孩子一样成长，如果有另一个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>

于 2016-11-03T02:38:49.427 回答