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

Question

我正在尝试理解以下行。

flex :0 1 50%

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

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

很好奇你的解释是什么。

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

Answer 1

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

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

当然，在flex布局中，flex-basis代表的是初始main size或者，flex-grow和之前的尺寸>flex-shrink 被应用。

你禁用了 flex-grow，所以什么也没有发生。

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

在这种情况下，因为所有元素都设置为 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.

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

• Working with the CSS height property and percentage values