1 min read

CSS3 flex-grow

CSS3弹性盒模型中,有两类元素:

  1. flex container
  2. flex item

如下图1

css3 flexible box model

flex container通过声明元素的display属性为flexinline-flex定义,flex container的子元素无需声明,直接就是flex item。

flex-grow是flex item的CSS属性,默认值为0。

简单说,它是flex item分配flex container剩余空间的规则。

如下例:

CSS3 flex-grow属性{.jsbin-embed}

未设置flex-grow前,红色部分文字宽度是403px,蓝色部分文字宽度是27px,包含块宽度是630px。所以包含块还剩下200px空间可以给它的flex item分配。

因为红色部分的flex-grow值为1,蓝色部分的flex-grow值为2,所以200px分三份,红色占一份,即66.6666666667px,蓝色占两份,即133.333333333px。

最后计算结果,红色的长度为403+66.6666666667=470px,绿色的长度为27+133.333333333=160px。

而如果flex container没有空间剩余,则flex-grow值不管设置成什么都不会有影响。


  1. 图片来自W3 [return]
报告问题 修订