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

Question

我正在尝试理解以下行。

flex: 0 1 50%

现在，如果最后一个值，flex based 是像素，上面会说该项目不允许增长，但允许缩小并且最大为 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

flex-basis 的百分比值根据弹性项目的 包含块（即它的弹性容器）；如果包含 块的大小是不确定的，flex-basis 的使用值为 content.

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

• Working with the CSS height property and percentage values