flex属性是flex-grow、flex-shrink和flex-basis的简写，用于控制弹性项目在主轴上的伸缩行为；常见写法如flex:1（等比拉伸）、flex:auto（内容决定尺寸）、flex:none（不伸缩）；flex-grow定义剩余空间的分配比例，flex-shrink决定项目在空间不足时的收缩比例，flex-basis设置项目伸缩前的基准尺寸；三者协同实现灵活布局。
在使用 CSS Flexbox 布局时，flex 属性是控制子元素如何分配容器空间的核心工具之一。它决定了弹性项目（flex item）的伸缩比例，让布局更加灵活和响应式。
flex 属性的基本作用
flex 是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，用于定义项目在主轴方向上的伸缩行为。
语法格式如下：
flex: [flex-grow] [flex-shrink] [flex-basis];常见写法有：
立即学习“前端免费学习笔记（深入）”；
- flex: 1 —— 常用于等比拉伸，等同于 flex: 1 1 0%;
- flex: auto —— 等同于 flex: 1 1 auto，内容决定基础尺寸，可伸缩
- flex: none —— 不伸缩，等同于 flex: 0 0 auto
- flex: 2 —— 该项目的拉伸比例是其他 flex:1 项目的两倍
flex-grow 控制扩展比例
当容器有剩余空间时，flex-grow 决定项目如何“拉伸”来填充空间。
- 默认值为 0，表示不扩展
- 设置为 1 或更大时，项目将按比例分配剩余空间
- 例如：两个项目分别设置 flex-grow: 1 和 flex-grow: 2，后者将获得两倍于前者的扩展空间
flex-shrink 控制收缩比例
当所有项目总尺寸超过容器时，flex-shrink 决定它们如何“压缩”以适应容器。
- 默认值为 1，表示可正常收缩
- 设为 0 时，项目不会被压缩，可能溢出容器
- 数值越大，压缩得越厉害。比如 flex-shrink: 3 的项目比 flex-shrink: 1 的压缩更多
flex-basis 设置基准尺寸
flex-basis 相当于项目在伸缩前的“初始大小”，可以是长度值或百分比。
- 类似 width，但作用于主轴方向
- 常见值如 100px、20%、auto（根据内容自动调整）
- 当设为 0 时，空间分配更均匀（常用于 flex: 1 这类场景）
基本上就这些。理解 flex 属性的关键是明白它是 grow、shrink、basis 的组合，三者协同工作，才能实现真正灵活的布局。实际开发中，常用简写形式快速设置，比如 flex: 1 实现均分空间，flex: none 防止压缩等，掌握这些模式就能高效使用 Flexbox。
