flex-grow如何分配父元素的剩余空间

flex-grow分配父元素的剩余空间

flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位），剩余空间将会按照这个权重来分配。

比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum = a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum，是为权重。

sum > 1的时候

<style type="text/css">
    .flex2{
		display: flex;
		width: 500px;
		border: 1px solid;
		height: 200px;
		box-sizing: content-box;
		line-height: 200px;
		font-size: 30px;
		color: white;
		text-align: center;
		margin: 10px auto;
	}
	.flex21{
		width: 100px;
		flex-grow: 1;
		background: green;
	}
	.flex22{
		width: 100px;
		flex-grow: 2;
		background: blue;
	}
	.flex23{
		width: 100px;
		flex-grow: 3;
		background: red;
	}
</style>
<div class="flex2">
    <div class="flex21">1</div>
    <div class="flex22">2</div>
    <div class="flex23">3</div>
</div>

父元素宽度 500px，三个子元素的 width 分别为 100px，100px，100px。

剩余空间200px;

子元素flex-grow为1、2、3，sum为6；

多余空间分别是：

200 * 1 / 6 = 33.33px

200 * 2 / 6 = 66.66px

200 * 3 / 6 = 100px

最终计算宽度：

100px + 33.33px = 133.33px

100px + 66.66px = 166.66px / 166.67px

100px + 100px = 200px

sun < 1 的时候

<style type="text/css">
    .flex2_{
    	display: flex;
    	width: 500px;
    	border: 1px solid;
    	height: 200px;
    	box-sizing: content-box;
    	line-height: 200px;
    	font-size: 30px;
    	color: white;
    	text-align: center;
    	margin: 10px auto;
    }
    .flex21{
    	width: 100px;
    	flex-grow: 0.1;
    	background: green;
    }
    .flex22{
    	width: 100px;
    	flex-grow: 0.2;
    	background: blue;
    }
    .flex23{
    	width: 100px;
    	flex-grow: 0.3;
    	background: red;
    }
</style>
<div class="flex2_">
    <div class="flex21">1</div>
    <div class="flex22">2</div>
    <div class="flex23">3</div>
</div>

当所有元素的 flex-grow 之和小于 1 的时候，上面式子中的 sum 将会使用 1 来参与计算，而不论它们的和是多少。也就是说，当所有的元素的 flex-grow 之和小于 1 的时候，剩余空间不会全部分配给各个元素。

实际上用来分配的空间是 sum * (flex-grow) / 1 * 剩余空间，这些用来分配的空间依然是按 flex-grow 的比例来分配。

子元素flex-grow为0.1、0.2、0.3，sum为0.6，但是不以0.6分配，以1分配。

200 * 0.1 / 1 = 20px;

200 * 0.2 / 1 = 40px;

200 * 0.3 / 1 = 60px;

所以最终结果：

100px + 20px = 120px

100px + 40px = 140px

100px + 60px = 160px

剩余未分配空间：200 - 20 - 40 - 60 = 80px;

另外，flex-grow 还会受到 max-width 的影响。如果最终 grow 后的结果大于 max-width 指定的值，max-width 的值将会优先使用。同样会导致父元素有部分剩余空间没有分配。

flex-shrink如何如何分配容器收缩空间