我不明白是什么让flex项目从成长变为收缩行为？起初我认为这是flex-basis价值,但如果只有一个项目有,或者没有？
此外,规格flex-basis说:
flex-basis CSS属性指定flex基础,它是flex项目的初始主要大小.
那是什么意思？如果我有一个项目,其余的是默认的,为什么它通常比值大一点？增加的空间来自哪里？
在通过其他flex属性分配可用空间之前,该flex-basis属性设置flex项的初始主要大小.
这意味着首先根据定义的宽度(in flex-direction: row)或height(in flex-direction: column)调整flex项的大小.
换句话说,在行方向柔性容器中,flex-basis: 100px相当于width: 100px,该项目的宽度为100px.
这是最初的主要尺寸.
然后,应用其他弹性属性.即,flex-grow和flex-shrink.
如果容器宽度大于100px,则flex-grow: 1展开项目以填充额外空间.
如果容器小于100px,则flex-grow: 1忽略并flex-shrink: 1根据flex大小调整算法减小项目的大小.
那么,回答你的问题:
flex何时从增长变为收缩？
假设这两种性质被启用(即,它们不是flex-grow: 0或flex-shrink: 0),将当所述总和发生开关flex-basis/ width/ height在柔性物品不再少于或多于所述容器的长度.
为了使这一点更清楚:
当总和flex-basis/ width/ heightFlex的项目不再更超过容器的长度,这意味着没有溢出,并且项目不消耗所有可用空间.flex-grow作品.
当总和flex-basis/ width/ height在柔性物品不再少比容器的长度,这意味着存在溢出和物品必须缩小以适合在容器内部.flex-shrink作品.
从规格:
flex-grow此[属性]指定弹性增长因子,该因子确定当分配正空闲空间时,弹性项目相对于弹性容器中其余弹性项目的增长量.
flex-shrink此[property]指定flex缩减系数,该系数确定在分配负可用空间时,flex项目相对于Flex容器中其余flex项目的收缩程度.
flex-basis此[属性]指定在根据弹性因子分配可用空间之前弹性项目的初始主要大小.