css中flex-shrink属性是什么_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css中flex-shrink属性是什么

2025-11-28

浏览次数：次

返回列表

flex-shrink用于控制弹性子元素在空间不足时的收缩比例，默认值为1，值越大收缩越多，0则不收缩；当容器宽度小于子元素总宽度时，浏览器按flex-shrink系数分配压缩量，如示例中item1（flex-shrink:1）和item2（2）共压缩100px，按1:2比例分别约缩33px和67px，而item3设为0保持不变，该属性常与flex-grow、flex-basis通过flex简写使用，理解它有助于排查元素意外变窄问题。

css中flex-shrink属性是什么

flex-shrink 是 CSS Flexbox 布局中的一个属性，用来控制弹性盒子（flex item）在空间不足时的收缩能力。

flex-shrink 是做什么的？

当所有弹性子元素的总宽度超过容器宽度时，浏览器需要决定如何缩小这些子元素以适应容器。flex-shrink 就是决定某个子元素“应该被压缩多少”的系数。

它的值是一个数字，默认是 1。值越大，元素在空间不足时被压缩的程度就越大；值为 0 时，表示不参与压缩。

关于Objective

本文档主要讲述的是关于Objective-C手动内存管理的规则；在ios开发中Objective-C 增加了一些新的东西，包括属性和垃圾回收。那么，我们在学习Objective-C之前，最好应该先了解，从前是什么样的，为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看

0 查看详情关于Objective

怎么用？看个例子

假设你有三个子元素，每个原本宽 200px，父容器宽 500px：

总内容宽 600px，超出了 100px
这时就要靠 flex-shrink 来决定谁“让出空间”

HTML 结构：

<div class="container">
  <div class="item item1">A</div>
  <div class="item item2">B</div>
  <div class="item item3">C</div>
</div>

CSS 示例：

.container {
  display: flex;
  width: 500px;
}
.item {
  width: 200px;
  height: 100px;
}
.item1 { flex-shrink: 1; }
.item2 { flex-shrink: 2; }
.item3 { flex-shrink: 0; }

结果解释：