flex-grow
flex-grow 处理父元素在还有剩余空间时的分配规则,分为两种情况。
即:所有元素的 flex-grow 值之和大于1,和小于1。
-
大于1时,例如:
父元素宽600,子元素A和B,宽分别为200,300。还剩余100。
此时A,B的 flex-grow 分别为2,3。则剩余100,分给A 2/5,分给B 3/5。
A,B宽度为:200 + 40 = 240 300 + 60 = 360
-
小于1时,作为分母的总和会引入1来处理。例如:
上例中,A,B flex-grow 分别为 0.2,0.3。则分给A 0.2/1,分给B 0.3/1。
A,B宽度为:200 + 20 = 220 300 + 30 = 330
还剩50没有分配给任何子元素扩张。
-
另外,flex-grow 还会受到父元素的 max-width 影响。如果grow后的结果超出 max-width,max-width 会优先生效。
flex-shrink
和 flex-grow 处理父元素剩余空间相对应的,是 flex-shrink 处理父元素空间不足时,子元素的收缩规则。
同样分为两种情况,所有元素的 flex-shrink 值之和大于1,和小于1。
-
大于1时,例如:
父元素宽度为600,子元素宽度为400,300。超出100。
A,B flex-shrink 分别为 1,2。总权重为400 + 300 * 2 = 1000
A收缩 -100 * 1 * 400 / 1000 = -40 B收缩 -100 * 2 * 300 / 1000 = -60
A,B实际宽度为:
400 - 40 = 360 300 - 60 = 240
-
小于1时,例如,
A,B flex-shrink 分别为 0.1,0.2。总权重为400 * 0.1 + 300 * 0.2 = 100
子元素收缩总和为100 * 0.3 / 1 = 30
A收缩 -30 * 0.1 * 400 / 100 = -12 B收缩 -30 * 0.2 * 300 / 100 = -18
A,B实际宽度为:
400 - 12 = 388 300 - 18 = 282
多出70没有分配给任何子元素收缩。
-
同样,也会受到min-width的限制。
发现一个很好玩的flex使用游戏教程:flexboxfroggy.com/