css - flex-grow 什么时候切换到 flex-shrink，反之亦然？

Question

我不明白是什么让 flex 元素从增长行为切换到收缩行为？起初我以为它是 flex-basis 值，但是如果只有一个元素有它，或者没有呢？

另外，flex-basis 的规范说:

The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item.

这是什么意思？如果我有一个元素，其余的都是默认值，为什么它通常开始比值大一点？增加的空间从何而来？

Answer 1

flex-basis 属性设置 flex 元素的初始主要大小，在空闲空间由其他 flex 属性分配之前。/p>

这意味着 flex 元素首先根据其定义的宽度(flex-direction: row)或高度(flex-direction: column)调整大小。

换句话说，在行方向的 flex 容器中，flex-basis: 100px 等同于 width: 100px，元素的宽度为 100px .

这是初始的主要尺寸。

然后，应用其他 flex 属性。即，flex-grow 和 flex-shrink。

如果容器的宽度超过 100px，则 flex-grow: 1 扩展元素以填充额外的空间。

如果容器小于 100px，则 flex-grow: 1 被忽略，flex-shrink: 1 根据 flex sizing algorithm 减小元素的大小。

所以，回答你的问题:

When does flex switch from grow to shrink?

假设两个属性都启用(即，它们不是 flex-grow: 0 或 flex-shrink: 0)，当总和为 flex 元素的 flex-basis/width/height 不再小于或大于容器的长度。

为了更清楚一点:

• 当 flex 元素的 flex-basis/width/height 的总和不再更多 超过容器的长度，这意味着没有溢出并且元素不会占用所有可用空间。 flex-grow 有效。

• 当 flex 元素的 flex-basis/width/height 的总和不再less 超过容器的长度，这意味着有溢出并且元素必须收缩以适合容器。 flex-shrink 有效。

来自规范:

flex-grow

This [property] specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

flex-shrink

This [property] specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

flex-basis

This [property] specifies the initial main size of the flex item, before free space is distributed according to the flex factors.

_{https://www.w3.org/TR/css-flexbox-1/#flex-property}