#flex-grow
定义了元素当有可用空间的时候如何 占用。
默认属性
flex-grow: 0;
元素 不 不占用剩余空间。它仅仅占用自身所需空间。
flex-grow: 1;
元素将 占用 扩展因子 1。如果没有其他元素也设置了 flex-grow
的话,它将占用剩下的所有空间。
flex-grow: 2;
因为 flex-grow 的值是相对的,它的具体表现还取决于此元素的同级元素。
在这个例子中,剩余空间被分隔成了 3 个扩展因子:
- 三分之一分配给了绿色 元素
- 三分之二分配给了粉色元素
- 没有其他空间分配给黄色元素,它保留了自身原本占用的大小。