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

时间:2015-02-12 09:30:36

标签: css css3 flexbox

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

  • width:0
  • “成长= 0”

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

1 个答案:

答案 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-basiswidth项。