`flex-grow:0`如何被解释？

Question

我想知道flex-grow:0Flexbox模型是否意味着

• width:0 要么
• "增长= 0".

如果它意味着后者,是否可以说它等于width:auto和display:inline-block,即它需要显示所需的宽度？

Answer 1

flex-grow:0只是意味着在项目大小计算期间不会调整项目的大小以适应Flex容器的完整主轴大小.

规范将其描述为:

此<number>组件设置flex-grow纵向并指定弹性增长因子,该因子确定当分配正空闲空间时,弹性项目相对于弹性容器中其余弹性项目的增长量.省略时,将其设置为1.

我强调了主轴尺寸,你应该知道这flex-grow与柔性容器的主轴有关,可以是宽度或高度尺寸,取决于flex-direction用户浏览器的写入方向性.

因此,我们不能假设等于你的假设.

但是当我们谈论flex-direction: row和编写方向性LRTB(从左到右,从上到下)时,它们的确以类似的方式工作width: auto;.项目显示为内联,但它们仍然不会呈现相同,因为HTML源代码中的每个换行符都没有添加空格,正如我们通常使用常用内联元素看到的那样.

怎么样width: 0？

Flex项目宽度与flex-basis属性相关,而不是与增长因子相关联.虽然当定义增长和收缩因子并且非零时,弹性属性优先于项目width或height项目.