flex-shrink

版本： CSS3

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在 宽度之和 大于 容器值 的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

示例

flex-shrink: 2;
flex-shrink: 0.6;

/* global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;

浏览器支持

IE11 以上版本的浏览器都支持 flex-shrink

语法

flex-shrink : <number>

取值

<number> ：参见 <number> 。负值无效，默认为 1 。

说明：

设置或检索弹性盒的收缩比率。

• 根据弹性盒子元素所设置的收缩因子（即 flex-basis ）作为比率来收缩空间。
• flex-shrink 的默认值为 1 。如果没有显示定义该属性，将会自动按照默认值 1 ，在所有因子相加之后计算比率，来进行空间收缩。
• 对应的脚本特性为 flexGrow 。

计算规则

W3C 中对于 flex-shrink 原文定义：

This component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1.

Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.

原文链接：https://www.w3.org/TR/css-flexbox-1/#flex-flex-shrink-factor

实例

<style>
.flex { display: flex; width: 500px; margin: 0; padding: 0; list-style: none; }
.flex li:nth-child(1) { width: 150px; flex-shrink:1;}
.flex li:nth-child(2) { width: 200px; flex-shrink:2;}
.flex li:nth-child(3) { width: 300px; flex-shrink:3;}
</style>


<ul>
   <li>a</li>
   <li>b</li>
   <li>c</li>
</ul>

1. 计算子元素溢出多少：(150 + 200 + 300)- 500= 150px。
2. 计算收缩总权重。每个元素 flex-shrink * 各自width 。所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450
3. 计算每个元素的收缩值。 各自弹性收缩系数 * 弹性基础尺寸
   • 第一个元素：(150 / 1450)* 1 * 150 = 15.5
   • 第二个元素：(200 / 1450)* 2 * 150 = 41.4
   • 第三个元素：(300 / 1450)* 3 * 150 = 93.1
4. 计算每个元素的最终宽度：
   • 第一个元素：150 - 15.5 = 134.5
   • 第二个元素：200 - 41.4 = 158.6
   • 第三个元素：300 - 93.1 = 206.9

<div style="width: 200px;margin: auto;border: 1px solid #000;display: flex">
    <div style="flex-shrink: 2;width: 150px;">one</div>
    <div style="flex-shrink: 1;width: 100px;">two</div>
</div>

1. 计算溢出多少：(150 + 100)- 200 = 50px
2. 计算收缩总权：2*150 + 1*100 = 400
3. 计算每个元素的收缩值。
   • 第一个元素所要减去的长度：50*2*150/400 = 37.5；（多出来的长度乘以此元素所占比例 2 * 150/400 ）
   • 第二个元素所要减去的长度：50*1*100/400 = 12.5；
4. 计算每个元素的最终宽度：
   • 第一个元素：150 - 37.5 = 112.5
   • 第二个元素：100 - 12.5 = 87.5/li>