CSS flex-shrink 属性

CSS flex-shrink 语法

在 CSS 中，flex-shrink 属性用于定义弹性容器中子元素的压缩比例。也就是当所有子元素宽度之和大于父元素的宽度时，子元素如何缩小自己的宽度。

语法：

flex-shrink: 数值;

说明：

flex-shrink 属性取值是一个非负数值，默认值为 1。当取值为 0 时，表示子元素不缩小。当取值大于 1 时，表示子元素按一定的比例缩小。取值越大，缩小得越厉害。

举个例子，父元素下有两个子元素：A 和 B。其中父元素宽 400px，A 宽为 200px，B 宽为 300px。那么 A 和 B 宽度之和超出父元素宽度为：200+300-400=100px。

如果 A 和 B 都不缩小，也就是 A 和 B 都设置 flex-shrink: 0，那么会有 100px 的宽度超出父元素。
如果 A 不缩小，B 缩小。其中 A 设置 flex-shrink: 0;，B 设置 flex-shrink: 1;（默认值）。那么最终 A 的宽不变还是 200px，B 的宽为 300-100=200px（自身宽度 - 超出父元素的宽度）。
如果 A 和 B 同时缩小，其中 A 设置 flex-shrink: 1，B 设置 flex-shrink: 1，那么最终 A 的宽为 200-100×[(200x1)/(200x1+300x1)]=160px（A 自身宽度 -A 减小的宽度），B 的宽为 300-100×[(300x1)/(200x1+300x1)]=240px（B 自身宽度 -B 减小的宽度）。
如果 A 和 B 同时缩小，其中 A 设置 flex-shrink: 3，B 设置 flex-shrink: 2，那么最终 A 的宽为 200-100×[(200x3)/(200x3+300x2)]=150px（A 自身宽度 -A 减小的宽度），B 的宽为 300-100×[(300x2)/(200x3+300x2)]=250px（B 自身宽度 -B 减小的宽度）。

对于 flex-shrink 属性，小伙伴们还要清楚以下几点。

flex-shrink 只在弹性容器的主轴方向上空间不足时才会生效。如果所有子项都能完全容纳在容器中，flex-shrink 将不会有任何可见效果。
flex-shrink 决定的是如何分配需要收缩的尺寸，而不是子项的最终尺寸。子项的最终尺寸还会受到其 flex-basis、width、height 以及 flex-grow 的影响。

注意: flex-shrink 属性只能用于弹性容器的子项，即作为 display 取值为 flex 或 inline-flex 元素的子元素。

CSS flex-shrink 摘要

属于	CSS flex 布局
使用频率	中
是否继承	否
默认值	1
兼容性	查看
官方文档	查看
MDN	查看

CSS flex-shrink 示例

接下来，我们通过几个简单的例子来讲解一下 flex-shrink 属性是如何使用的。

示例 1：flex-shrink 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            display: flex;
            width: 200px;
            height: 100px;
        }
        .box > div { width: 100px; }
        .box > div:nth-child(1) {
            flex-shrink: 0;
            background-color: red;
        }
        .box > div:nth-child(2) {
            flex-shrink: 1;
            background-color: green;
        }
        .box > div:nth-child(3) {
            flex-shrink: 3;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

页面效果如下图所示。

flex-shrink 基本用法

分析：

在这个例子中，弹性盒子（父元素）的宽度为 200px，所有子元素的宽度之和为 300px，子元素的宽度之和大于弹性盒子宽度之和，因此 flex-shrink 属性生效。

flex-shrink: 0; 表示该子元素不参与收缩，因此第 1 个子元素的宽度固定为 100px。从上面可以计算得到，所有子元素宽度之和超出父元素的宽度为 100px。由于第 2 个子元素定义了 flex-shrink: 1;，而第 3 个子元素定义了 flex-shrink: 3;，因此最终第 2 个子元素宽度为 100-100×[(100×1)/(100×1+100×3)]=75px，第 3 个子元素宽度为 100-100×[(100×3)/(100×1+100×3)]=25px。

对于 flex-grow 和 flex-shrink 这两个属性，可以总结出以下几点。

只有当所有子元素宽度之和小于弹性盒子的宽度时，flex-grow 才会生效，而此时 flex-shrink 无效；只有当所有子元素宽度之和大于弹性盒子的宽度时，flex-shrink 属性才会生效，而此时 flex-grow 无效。也就是说，flex-grow 和 flex-shrink 是互斥的，不可能同时生效。
对于定义了 flex-grow: 0 或者 flex-shrink: 0; 的子元素，宽度为原来定义的宽度，并且不会参与划分。
flex-grow 的默认值为 0，而 flex-shrink 的默认值为 1。

示例 2：flex-shrink 的应用场景

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .box {
            display: flex;
            justify-content: flex-start;
            width: 500px;
            height: 200px;
            background-color: skyblue;
        }
        .box > div {
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 1px solid silver;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>

页面效果如下图所示。

flex-shrink的应用场景

分析：

默认情况下，当子元素宽度之和大于父元素宽度时，子元素就会压缩。如果不希望子元素被压缩，就需要使用 flex-shrink: 0; 来设置。

对于上面例子来说，如果在子元素中设置 flex-shrink: 0;，此时页面效果如下图所示。

在子元素中设置flex-shrink:0;

flex 是一个复合属性

在 CSS 中，flex 是一个复合属性，它有 3 个子属性（如下表所示）。

flex 的子属性
子属性	说明
flex-grow	定义弹性容器中子项的增长比例，决定如何分配多余空间
flex-shrink	定义弹性容器中子项的缩小比例，决定空间不足时如何压缩
flex-basis	定义弹性容器中子项的初始大小，影响其在主轴上的基础长度