使用 flex-basis 时了解 flex-grow 和 flex-shrink

Question

我正在尝试理解以下行。

flex: 0 1 50%

现在如果最后一个值，flex basis 是像素上面会说该项目不允许增长，但允许缩小并且最大为 50 像素。

但是里面有百分比，有什么关系。它将最大为宽度的 50%，但是，嗯，因为它不允许增长，它将保持在 50% 的...某物

想知道你的解释是什么。

提前致谢，就像我们在瑞典所说的那样。

Answer 1

百分比长度是相对于它们的包含块。

因此，如果 flex 容器的宽度为 200px，并且 flex 项目设置为 flex-basis: 50%，则每个项目将解析为 100px。

当然，在flex布局中，flex-basis表示初始主要尺寸或者，应用flex-grow和flex-shrink之前的尺寸.

您已 flex-grow 禁用，所以那里没有任何反应。

但是您启用了 flex-shrink，因此项目会在必要时缩小到 100 像素以下以防止容器溢出。

在这种情况下，因为所有项目都设置为flex-shrink: 1，它们将等比例缩小。

article {
  display: flex;
  width: 200px;
  border: 1px solid black;
}

[one] > section {
  flex: 0 1 50px;
}

[two] > section {
  flex: 0 1 50%;
}

[three] > section {
  flex: 0 0 50%;
}


/* non-essential demo styles */
section {
  height: 50px;
  background-color: lightgreen;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

<p>container width 200px in all cases</p>
<article one>
  <section><span>50px</span></section>
  <section><span>50px</span></section>
  <section><span>50px</span></section>
  <section><span>50px</span></section>
</article>

<hr>

<p><code>flex-shrink</code> enabled</p>

<article two>
  <section><span>50%</span></section>
  <section><span>50%</span></section>
  <section><span>50%</span></section>
  <section><span>50%</span></section>
</article>

<hr>

<p><code>flex-shrink</code> disabled</p>

<article three>
  <section><span>50%</span></section>
  <section><span>50%</span></section>
  <section><span>50%</span></section>
  <section><span>50%</span></section>
</article>

有关百分比和 flex-basis 的更多详细信息：

§ 7.2.3. The flex-basis property

Percentage values of flex-basis are resolved against the flex item’s containing block (i.e. its flex container); and if that containing block’s size is indefinite, the used value for flex-basis is content.

有关一般百分比长度的更多详细信息：

使用 flex-basis 时了解 flex-grow 和 flex-shrink

Understanding flex-grow and flex-shrink when using flex-basis

css

percentage

flexbox