css – flex-grow何时切换到flex-shrink,反之亦然？

我不明白是什么让flex项目从成长变为收缩行为？起初我以为它是弹性基础值,但如果只有一个项目有,或者没有？

此外,基于flex的规格说：

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

那是什么意思？如果我有一个项目,其余的是默认的,为什么它通常比值大一点？增加的空间来自哪里？

解决方法

flex-basis属性设置flex项的初始主要大小,在其他flex属性分配可用空间之前.

这意味着首先根据其定义的宽度(在flex-direction：行中)或height(在flex-direction：column中)调整flex项的大小.

换句话说,在行方向柔性容器中,其中flex-basis：100px等于宽度：100px,该项目的宽度为100px.

这是最初的主要尺寸.

然后,应用其他弹性属性.即,弯曲生长和弯曲收缩.

如果容器宽度大于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-grow工作.
>当柔性物品上的柔性基础/宽度/高度的总和不再小于容器的长度时,这意味着存在溢出并且物品必须缩小以适合容器内部. 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.

₀₇₀₀₁