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

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

flex-shrink 属性的作用：在空间不够时让各个子元素收缩以适应有限的空间了。

flex-shrink 属性定义空间不够时各个元素如何收缩。其值默认为 1。

flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量。

sum > 1

<style type="text/css">
	.flex3{
		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;
	}
	.flex31{
		width: 200px;
		background: green;
		flex-shrink: 1;
	}
	.flex32{
		width: 300px;
		background: blue;
		flex-shrink: 2;
	}
	.flex33{
		width: 200px;
		background: red;
		flex-shrink: 3;
	}
</style>
<div class="flex3">
	<div class="flex31">1</div>
	<div class="flex32">2</div>
	<div class="flex33">3</div>
</div>

父元素500px；三个子元素200px、300px、200px;

子元素flex-shrink为1、2、3；

子元素超出值：200 + 300 + 200 - 500 = 200px;

收缩量：每个元素收缩的权重为其 flex-shrink 乘以其宽度

总值为：1 * 200 + 2 * 300 + 3 * 200 = 1400px;

三个元素收缩值为：

200 * 1 * 200 / 1400 = 28.57px

200 * 2 * 300 / 1400 = 85.71px

200 * 3 * 200 / 1400 = 85.71px

最终子元素宽度：

200 - 28.57 = 171.43px

300 - 85.71 = 214.29px

200 - 85.71 = 114.29px

sum < 1

所有元素的 flex-shrink 之和小于 1 时，计算方式也会有所不同：

不会收缩所有的空间，而只会收缩 flex-shrink 之和相对于 1 的比例的空间。

<style type="text/css">
	.flex3_{
		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;
	}
	.flex31{
		width: 200px;
		background: green;
		flex-shrink: 0.1;
	}
	.flex32{
		width: 300px;
		background: blue;
		flex-shrink: 0.2;
	}
	.flex33{
		width: 200px;
		background: red;
		flex-shrink: 0.3;
	}
</style>
<div class="flex3_">
	<div class="flex31">1</div>
	<div class="flex32">2</div>
	<div class="flex33">3</div>
</div>

子元素 flex-shrink值为：0.1，0.2，0.3；

总权重为：0.1 * 200 + 0.2 * 300 + 0.3 * 200 = 140px;

三个元素收缩总和却不是200，而是：200 * 0.6 / 1 = 120px;

每个元素的收缩值为：

120 * 0.1 * 200 / 140 = 17.14px

120 * 0.2 * 300 / 140 = 51.42px

120 * 0.3 * 200 / 140 = 51.42px

最终宽度为：

200 - 17.14 = 182.86px

300 - 51.42 = 248.58px

200 - 51.42 = 148.58px

flex-shrink 会受到 min-width 的影响。

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