#flex-grow

定义了元素当有可用空间的时候如何 占用

默认属性 flex-grow: 0;

元素 不占用剩余空间。它仅仅占用自身所需空间。

flex-grow: 1;

元素将 占用 扩展因子 1。如果没有其他元素也设置了 flex-grow 的话,它将占用剩下的所有空间。

flex-grow: 2;

因为 flex-grow 的值是相对的,它的具体表现还取决于此元素的同级元素

在这个例子中,剩余空间被分隔成了 3 个扩展因子:

  • 三分之分配给了绿色 元素
  • 三分之分配给了粉色元素
  • 没有其他空间分配给黄色元素,它保留了自身原本占用的大小。