CSS: Flexbox 项目属性
最后更新：2026-10-13
flex 容器属性控制"整体"行为，而项目属性则控制每个子元素"个体"的行为。通过项目属性，你可以控制每个项目的排列顺序、尺寸伸缩和对齐方式。
1. 项目属性一览
| 属性 | 作用 | 默认值 |
|---|---|---|
order |
控制排列顺序 | 0 |
flex-grow |
伸展比例（有剩余空间时） | 0 |
💡 flex: 1 的含义：
flex: 1 其实是 flex-grow: 1 的简写。它表示"尽量占满剩余空间"，等分布局里最常用。如果有两个项目都设了 flex: 1，它们各占 50%。
| flex-shrink | 收缩比例（空间不足时） | 1 |
| flex-basis | 初始尺寸 | auto |
| flex | 以上三个的简写 | 0 1 auto |
| align-self | 单独对齐方式 | auto |
2. order：排序
改变项目的视觉顺序，不影响 HTML 结构：
▶ 示例
▶ 试一试规则：
- 数值越小越靠前
- 默认所有项目的
order为 0 - 可以为负数（比 0 小就会排在所有默认项目前面）
3. flex-grow：伸展比例
当容器有剩余空间时，项目按比例瓜分剩余空间：
▶ 示例
▶ 试一试规则：
- 默认值为 0（不伸展）
- 所有项目的 flex-grow 值加起来是分母，每个项目的值是分子
- 适合制作等宽布局或按比例分配空间的场景
4. flex-shrink：收缩比例
当容器空间不足时，项目按比例缩小：
▶ 示例
▶ 试一试规则：
- 默认值为 1（空间不足时收缩）
- 值为 0 时不收缩
- 值越大，收缩越快
5. flex-basis：初始尺寸
设置在分配剩余空间之前，项目在主轴上的基础尺寸：
▶ 示例
▶ 试一试注意：在 flex 布局中，flex-basis 的优先级高于 width。如果同时设置了 width 和 flex-basis，浏览器优先使用 flex-basis。
6. flex：弹性简写
flex 是 flex-grow、flex-shrink、flex-basis 的简写：
▶ 示例
▶ 试一试(1) 常用取值
▶ 示例
▶ 试一试建议：优先使用 flex 简写属性，而不是分开写 grow/shrink/basis，因为浏览器会相应的推算相关值。
7. align-self：单独对齐
覆盖容器的 align-items，让某个项目与众不同：
▶ 示例
▶ 试一试常用值：auto、flex-start、flex-end、center、stretch、baseline
8. 综合示例
▶ 示例
▶ 试一试❓ 常见问题
Q flex: 1 是什么意思？
A flex: 1 是
flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的简写，表示"尽可能占满剩余空间"。多个项目都设 flex: 1 时，它们会等分容器宽度。Q order 属性会影响 DOM 顺序吗？
A 不会。order 只改变视觉排列顺序，DOM 顺序不变。屏幕阅读器仍然按 DOM 顺序朗读，所以不要用 order 做只有视觉意义的排序——会影响无障碍体验。
Q align-self 和 align-items 谁优先级高？
A align-self 优先级更高。align-self 作用于单个项目，覆盖父容器 align-items 的设置。比如父容器设
align-items: center 居中对齐，但某个子元素可以设 align-self: flex-start 单独靠上。📖 小节
- Flexbox 的项目属性让你能精细控制每个子元素的排列顺序和尺寸
flex: 1是最常用的等分写法，order可以在不改 HTML 的情况下调整视觉顺序，align-self则让个别元素可以"特立独行"- 记住：容器属性管整体，项目属性管个体
📝 作业
- 创建一个 flex 容器，内含 5 个项目。使用
order属性让第 3 个项目显示在最前面，第 1 个项目显示在最后面。 - 使用
flex-grow实现"三栏等宽"布局，再让中间栏是两侧的两倍宽。 - 创建一个"固定侧栏 + 自适应内容"的布局：侧栏使用
flex: 0 0 250px，内容区使用flex: 1。 - 在一个容器中，让前两个项目顶部对齐，第三个项目底部对齐，使用
align-self实现。
