Flexbox弹性布局：flex-grow与flex-shrink详解

本文深入解析了CSS Flexbox中实现弹性宽度布局的核心机制——flex-grow与flex-shrink属性：前者决定元素在容器有剩余空间时按比例扩展的能力，后者控制空间不足时按比例收缩的优先级，二者再结合flex-basis定义初始尺寸，通过flex简写（如flex:1、flex:0 1 auto、flex:1 0 200px）可精准调控每个子元素的伸缩行为，从而在不依赖媒体查询的前提下，构建出高度自适应、流畅响应的现代网页布局。

在使用 CSS Flexbox 布局时，flex-grow 和 flex-shrink 是控制子元素如何分配容器剩余空间或在空间不足时如何缩放的核心属性。通过它们可以实现“弹性宽度”的布局效果，让元素智能地扩展或收缩。

flex-grow：控制元素的扩展能力

当 flex 容器中有剩余空间时，flex-grow 决定子元素如何按比例分配这些空间。

例如：

• 两个子元素分别设置 flex-grow: 1 和 flex-grow: 2，则后者将获得两倍于前者所分得的额外空间。
• 所有子项设为 flex-grow: 1，它们将平分剩余空间，实现等宽自适应布局。

flex-shrink：控制元素的收缩能力

当子元素总宽度超过容器时，flex-shrink 决定它们如何按比例缩小以适应容器。

比如：

• 某元素设置 flex-shrink: 0，它将保持原始尺寸不被压缩，其余元素承担全部收缩压力。
• 设置 flex-shrink: 2 的元素比 flex-shrink: 1 的元素收缩得更多。

flex-basis 与 flex 简写

实际使用中，常结合 flex-basis（定义元素的初始主轴尺寸）和上述两个属性，通过 flex 简写一次性设置：

• flex: 1 相当于 flex: 1 1 0% —— 可伸可缩，初始宽度为0，靠增长填充空间。
• flex: 0 1 auto 表示不扩展，但可收缩，宽度基于内容。
• flex: 1 0 200px 表示初始宽200px，不可缩但可扩展，适合固定最小宽、弹性拉伸的场景。

基本上就这些。合理搭配 flex-grow 和 flex-shrink，就能让布局在不同屏幕下自然伸缩，无需媒体查询也能实现流畅响应。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~