了解 flex 中的 flex-basis shorthand

Question

我了解 flex-grow：它允许弹性项目根据相对于同一 row/column 上其他弹性项目的比率增长。

我了解 flex-shrink：它允许 flex 项目根据相对于同一 row/column 上其他 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。然而，不仅不是这样，盒子一比任一盒子都大并且大于100px

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

Answer 1

这是"relative flex"的实例：使用了每个flex item的flex-basis，剩下的space加到这些

100px 恰好比您示例中其他两个的 auto 大； available space 在考虑 flex-basis 后均匀地添加到所有框。

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

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

（不是你的问题，但要澄清一下：如果你想让项目 space 分配给他们而不考虑他们的（固有）宽度，那么你应该将 flex-basis 设置为 0（或 0 %)，即 flex: 1 0 0;。这将使项目 在您的示例中 具有相同的宽度，因为所有框都以相同的 flex-basis 开头，然后得到 space分发给他们。）

了解 flex 中的 flex-basis shorthand

Understanding flex-basis in flex shorthand

css

flexbox