css布局中flex-grow与flex-shrink应用

flex-grow按比例分配剩余空间，flex-shrink控制溢出时的收缩比例，二者结合实现弹性布局。

在CSS Flex布局中，flex-grow 和 flex-shrink 是控制子元素如何分配容器剩余空间或应对空间不足的关键属性。它们不直接设置尺寸，而是定义伸缩行为，让布局更具弹性。

flex-grow：扩展以填充剩余空间

当Flex容器有剩余空间时，flex-grow 决定子元素的扩展比例。

默认值为0，表示不扩展。设为正整数时，按比例瓜分可用空间。

• 两个子项分别设置 flex-grow: 1 和 flex-grow: 2，容器剩余空间将按 1:2 分配。
• 所有子项都设为 flex-grow: 1，则平均分配剩余空间。

它只在主轴方向起作用，且前提是子项未占满容器。

立即学习“前端免费学习笔记（深入）”；

flex-shrink：收缩以适应容器

当子元素总尺寸超过容器时，flex-shrink 控制它们的收缩比例。

AI Sofiya

一款AI驱动的多功能工具

109

查看详情

默认值为1，表示可等比收缩。设为0则禁止收缩，可能造成溢出。

• 三个子项宽度各为200px，容器宽500px。总宽600px超出100px。
• 若它们的 flex-shrink 分别为 1、2、1，则按权重1:2:1共4份，各自收缩对应比例（25px、50px、25px）。

注意：收缩计算基于项目原始大小乘以 shrink 权重，不是简单等比压缩。

实际应用建议

这两个属性常与 flex-basis 一起使用，简写为 flex 属性。

• 希望某区域自适应宽度：设置 flex: 1，相当于 flex: 1 1 0% 或 flex: 1 1 auto，视情况而定。
• 固定侧边栏 + 自适应主内容：侧边栏 flex: 0 0 200px，主区 flex: 1。
• 防止文本被过度压缩：给文字容器设 flex-shrink: 0。

基本上就这些。理解 flex-grow 与 flex-shrink 的比例机制，能更精准地实现响应式弹性布局，避免依赖固定尺寸带来的适配问题。

以上就是css布局中flex-grow与flex-shrink应用的详细内容，更多请关注php中文网其它相关文章！