CSS | flex-shrink 属性

在Flexbox布局中，flex-shrink 属性表示项目在必要时缩小的量。我们可以设置这个属性来控制flex项如何缩小以适应其父容器。

语法

flex-shrink 属性的语法如下：

flex-shrink: <number>

其中 <number> 指定一个数字来表示缩小比例，缩小比例默认为1，即所有项目等分缩放。

示例

以下示例演示了如何使用 flex-shrink 属性：

.container {
  display: flex;
  flex-wrap: wrap;
  max-width:600px; /*把容器的最大宽度设置为600px*/
  background-color: #f0f0f0;
}

.box {
  flex-basis: 150px; /*设置项目的初始大小*/
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  font-size: 30px;
}

.box:nth-child(2) {
  flex-shrink: 2; /*第2个项目比较大，设置缩小比例为2*/
}

效果图如下：

浏览器兼容性

flex-shrink 属性在各大主流浏览器中得到了良好的支持，以下是兼容性列表：

| Chrome | Safari | Firefox | IE/Edge | Opera | | ------ | ------ | ------- | ------- | ----- | | 29+ | 9+ | 22+ | 10+ | 12.1+ |

注意： IE10支持flex-shrink属性，但需要使用-ms-前缀。因此，在使用IE10时，建议同时使用-ms-flex-shrink属性。

参考链接

• flex-shrink - MDN Web Docs
• A Complete Guide to Flexbox - CSS-Tricks