hooyantsing's Blog

P115_15_元素可用空间分配

字数统计: 176阅读时长: 1 min
2020/04/16

P115 15 元素可用空间分配

flex-grow

[对弹性元素设置]

对于子元素宽度/高度之和小于弹性容器宽度/高度。

d92a1788cd8c066bf46f3cb040826507.png

1
2
3
4
//表示不进行分配,原来多大就是多大。
flex-grow: 0;
//表示每个子元素都占用1等份
flex-grow: 1;

分析数字参数的意义

0ef8db14e3c3cb15acbc94cd73fca460.png

已知弹性容器宽度550px,内部有3个子元素,每个子元素宽度100px。


计算:

550 - 3 * 100 = 250 px

250 / 4 = 62.5 px

I.     100 + 0 * 62.5 = 100 px

II.    100 + 1 * 62.5 = 162.5 px

III.   100 + 3 * 62.5 = 287.5 px 

结果:

90b4b09fcb2f0f0f4e08eed9e688283d.png

结论:

子元素自身宽度+多出来的部分按照等分划分宽度。

CATALOG