在 flex 速记中理解 flex-basis

Question

我理解 flex-grow：它允许 flex 项根据相对于同一行/列上其他 flex 项的比率增长。

我了解 flex-shrink：它允许 flex 项根据相对于同一行/列上其他 flex 项的比率进行收缩。

我了解 flex-basis：它覆盖了 main-size 值并设置它的宽度（或高度，取决于方向）。

但是，我不明白flex-basis: auto || 0之类的。

这是我的代码：

<div class="container">
  <div class="one item">Box 1</div>
  <div class="two item">Box 2</div>
  <div class="three item">Box 3</div>
</div>

和css：

.container {
  display: flex;
}

.item {
  border: solid red 1px;
  padding: 5px;
}

.one {
  flex: 1 0 100px;
}

.two {
  flex: 1 0 auto;
}

.three {
  flex: 1 0 auto;
}

我希望所有三个框的大小都相同，因为它们都设置为flex-grow: 1。然而，不仅如此，Box one 比任何一个盒子都大并且大于 100px。

尽管 flex-grow 和 box 1 的 flex-basis 的比例均匀，但是是什么导致尺寸不均匀？

Answer 1

这是“相对弹性”的一个实例：使用每个弹性项目的flex-basis，并将剩余空间添加到这些。

100px 恰好比您示例中其他两个的 auto 大；考虑到flex-basis 后，可用空间将平均添加到所有框。

当框 2 的固有宽度大于框 1 的 100px 时会发生这种情况：http://jsbin.com/gakeju/1/

见http://www.w3.org/TR/css-flexbox-1/#valdef-flex-flex-basis

（不是您的问题，而是要澄清一下：如果您希望项目在不考虑其（固有）宽度的情况下分配给它们空间，那么您应该将 flex-basis 设置为 0（或 0%），即 @987654327 @。这会使 您的示例中的项目具有相同的宽度，因为所有框都以相同的 flex-basis 开头，然后将空间分配给它们。）