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 1比大于100px的和大。

尽管柔性生长的均匀比例和方框1的柔性基础被忽略，但是什么使尺寸不均匀？

Answer 1

这是＆＃34;相对flex＆＃34;的实例：使用每个弹性项目的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％），即{{ 1}}。这会使示例中的项具有相同的宽度，因为所有框都以相同的flex: 1 0 0;开头，然后将空间分配给它们。）

在弹性速记中理解弹性基础

1 个答案: