css flex-grow与flex-shrink配合使用_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

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

css flex-grow与flex-shrink配合使用

2025-11-10

浏览次数：次

返回列表

flex-grow定义项目在有剩余空间时的扩展比例，默认0不扩展；flex-shrink控制空间不足时的收缩能力，默认1可收缩。两者配合flex-basis可实现精准布局控制，如侧边栏固定宽、主内容区自适应。常见场景中，.sidebar设flex:0 0 200px保持固定，.main设flex:1 1 0填满剩余空间并可压缩。需注意flex-basis对计算起点的影响，避免仅关注grow/shrink而忽略布局偏差。设flex-shrink:0可防止关键元素被压缩，结合媒体查询优化响应式表现。掌握三者协同逻辑能提升布局灵活性与稳定性。

css flex-grow与flex-shrink配合使用

在 CSS Flexbox 布局中，flex-grow 和 flex-shrink 是控制弹性项目如何分配容器空间的两个关键属性。它们通常与 flex-basis 一起使用（合称 flex），但在实际开发中，单独调整 grow 和 shrink 能更精细地控制布局行为。

flex-grow 的作用

flex-grow 定义了弹性项目在有剩余空间时，按比例扩展的能力。默认值为 0，表示不扩展。

值为 0：项目不伸展，保持原有尺寸
值为 1 或更大：项目将按比例占据剩余空间
多个项目之间会根据数值比例分配空间，比如一个设为 1，另一个为 2，后者将获得两倍于前者的扩展空间

flex-shrink 的作用

flex-shrink 控制项目在空间不足时是否以及如何收缩。默认值是 1，表示允许收缩。

值为 0：项目不会被压缩，即使内容超出容器
值为 1 或更大：项目可按权重缩小，值越大，缩得越多
当所有项目都设为 flex-shrink: 0 时，可能出现溢出容器的情况

两者配合的实际场景

合理搭配 flex-grow 和 flex-shrink 可以实现灵活且健壮的布局。例如在一个侧边栏 + 主内容区的布局中：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

277 查看详情火龙果写作

.container {
  display: flex;
}
<p>.sidebar {
flex: 0 0 200px; /<em> 不扩展、不收缩、基础宽度200px </em>/
}</p><p>.main {
flex: 1 1 0; /<em> 可扩展、可收缩、基础宽度从0开始 </em>/
}</p>