HTML | DOM 样式 flexShrink 属性

介绍

flexShrink 属性定义弹性盒子元素的缩小比例。确定在必要时如何缩小元素，以适应它的容器空间。

该属性接受一个无单位的数字值，默认值为 1。它指定了弹性盒子缩小时的权重。如果所有弹性盒子元素的 flex-shrink 值都为 1，当空间不足时，它们将等比例缩小。

如果一个弹性盒子元素的 flex-shrink 值为 2，其他为 1，那么空间不足时该元素的尺寸将缩小的比其他弹性盒子元素的缩小的尺寸要多一倍。

语法

flex-shrink: number;

• number: 定义缩小比例。默认为 1。

实例

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

.item {
  width: 100px;
  height: 50px;
  margin: 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.item1 {
  background-color: #4caf50;
  flex-grow: 1;
}

.item2 {
  background-color: #2196f3;
  flex-shrink: 2;
}

.item3 {
  background-color: #f44336;
  flex-grow: 1;
}

上述实例中，元素 .item2 的 flex-shrink 值为 2，其他为 1，当容器不足时，.item2 的尺寸将缩小的比其他缩小的尺寸要多一倍。

兼容性

| Chrome | Edge | Firefox | IE | Opera | Safari | | :----: | :--: | :-----: | :-: | :---: | :----: | | 最新版 | 最新版 | 最新版 | 10-11
-ms- | 最新版 | 最新版 |

参考链接

• MDN web docs