CSSFlex布局：flex-basis、grow、shrink全解析

掌握CSS Flex布局，玩转空间分配！本文深入解析`flex-basis`、`flex-grow`和`flex-shrink`三大核心属性，助你彻底理解Flex子元素在容器中的尺寸控制。`flex-basis`定义初始尺寸，决定元素在主轴上的“起点”；`flex-grow`控制剩余空间扩展比例，让元素灵活伸展；`flex-shrink`则决定溢出时压缩比例，避免内容溢出。推荐使用`flex`简写属性统一设置，简化代码，提高开发效率。理解这三个属性的交互方式，掌握“先定基础尺寸，再看能否扩，最后考虑缩”的计算逻辑，轻松驾驭灵活布局，避免布局陷阱。

flex-basis定义初始尺寸，flex-grow控制剩余空间扩展比例，flex-shrink决定溢出时压缩比例，三者共同决定Flex子元素的空间分配，推荐使用flex简写属性统一设置。

在使用CSS Flex布局时，flex-basis、flex-grow 和 flex-shrink 是控制子元素尺寸的核心属性。它们共同作用于Flex子元素（flex items），决定其在容器中如何分配空间。理解这三个属性的含义和交互方式，是掌握灵活布局的关键。

flex-basis：定义子元素的初始主轴尺寸

flex-basis 指定子元素在主轴方向上的初始大小，相当于“起点尺寸”。浏览器会先根据这个值来分配空间，然后再考虑是否需要拉伸或压缩。

常见取值包括：

• auto：默认值，元素大小由内容决定
• 具体数值：如 100px、20%、5em 等
• 0：特别注意，设为0时内容空间不被计入，便于等分布局

例如：flex-basis: 200px 表示该元素在主轴上初始占200px宽度（row方向）或高度（column方向）。

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

flex-grow 定义当Flex容器有剩余空间时，子元素如何按比例拉伸。它是一个无单位的权重值。

关键点：

• 默认值为 0，表示不扩展
• 设为 1 或更大时，参与剩余空间分配
• 多个元素拥有不同 grow 值时，按比例分摊空间

比如两个子元素分别设置 flex-grow: 1 和 flex-grow: 2，则剩余空间将按 1:2 分配。

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

flex-shrink 决定当子元素总尺寸超出容器时，是否以及如何按比例压缩。

要点：

• 默认值为 1，允许收缩
• 设为 0 时，元素不会被压缩，可能溢出容器
• 值越大，压缩程度越高（但实际压缩量还受内容最小尺寸限制）

注意：与 flex-grow 不同，flex-shrink 在计算时会结合元素的 flex-basis 和内容尺寸进行加权处理，不是简单线性压缩。

简写属性 flex：推荐使用方式

通常我们使用 flex 简写属性来同时设置这三个值，语法为：

flex: [flex-grow] [flex-shrink] [flex-basis]

常用写法示例：

• flex: 1 相当于 flex: 1 1 0% 或 flex: 1 1 auto（取决于浏览器）
• flex: 1 1 200px 允许伸缩，初始大小200px
• flex: 0 0 100px 不伸缩，固定100px
• flex: 0 1 auto 可收缩，不可增长，基于内容大小

建议在实际开发中优先使用 flex 简写，语义清晰且易于维护。

基本上就这些。掌握 flex-basis、flex-grow 和 flex-shrink 的作用机制，能让你更精准地控制Flex布局中的空间分配，避免意外溢出或空白。关键是理解“先定基础尺寸，再看能否扩，最后考虑缩”的计算逻辑。不复杂但容易忽略细节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSFlex布局：flex-basis、grow、shrink全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。