我想知道Flexbox模型中的flex-grow:0
是否意味着
width:0
或如果它意味着后者,是否可以说它等于width:auto
和display:inline-block
,即它需要显示所需的宽度?
答案 0 :(得分:17)
flex-grow:0
只是意味着在项目大小计算期间不会调整项目的大小以适应Flex容器的完整主轴大小。
Specification将其描述为:
此
<number>
组件设置flex-grow
,并指定弹性增长系数,该系数确定当正空闲空间为0时,弹性项目相对于弹性容器中其他弹性项目的增长量。分散式。省略时,它设置为1
。
我强调主轴尺寸以上你应该知道flex-grow
与flex容器的主轴有关,可以是宽度或高度尺寸,具体取决于{{ 1}}并编写用户浏览器的方向性。
因此,我们不能假设与您的假设相等。
但是,当我们谈论flex-direction
并编写方向性LRTB(从左到右,从上到下)时,它们的确以与flex-direction: row
类似的方式工作。项目显示为内联,但它们仍然不会呈现相同的内容,因为HTML源代码中的每个换行符都没有添加空格,正如我们通常使用常用内联元素看到的那样。
width: auto;
怎么样? Flex项宽度与width: 0
属性相关联,而不是与增长因子相关联。虽然在定义增长和收缩因子且非零时,弹性属性优先于flex-basis
或width
项。