Flex布局通过display: flex启用，核心是主轴与交叉轴的对齐控制。1. flex-direction设置主轴方向（row/column及其反向）；2. justify-content控制项目在主轴对齐（flex-start至space-evenly）；3. align-items定义交叉轴对齐方式（stretch至baseline）；4. align-self允许单个项目覆盖align-items；5. flex-wrap决定是否换行（nowrap/wrap/wrap-reverse）；6. 多行时align-content控制行间在交叉轴分布。组合这些属性可高效实现各类布局。
Flex布局（Flexible Box Layout）是CSS中一种强大的一维布局模型，适合在容器内对子元素进行排列和对齐。它通过设置容器的 display: flex 来启用，主要涉及两个部分：容器（flex container）和项目（flex items）。以下是常见的排列方式及其控制属性。
主轴方向排列（justify-content）
主轴默认是水平方向（从左到右），可以通过 flex-direction 改变。以下属性控制项目在主轴上的对齐方式：
flex-direction: row —— 从左到右（默认）flex-direction: row-reverse —— 从右到左
flex-direction: column —— 从上到下
flex-direction: column-reverse —— 从下到上
结合 justify-content 可进一步控制主轴上的分布：
- justify-content: flex-start —— 项目靠向主轴起点（默认）
- justify-content: flex-end —— 靠向主轴终点
- justify-content: center —— 居中对齐
- justify-content: space-between —— 两端对齐，项目间间距相等
- justify-content: space-around —— 项目周围留有相等空间
- justify-content: space-evenly —— 所有项目之间和边缘间距完全相等
交叉轴对齐（align-items）
交叉轴垂直于主轴。例如主轴是row时，交叉轴就是垂直方向。以下属性控制项目在交叉轴上的对齐：
立即学习“前端免费学习笔记（深入）”；
- align-items: stretch —— 拉伸以填满容器（默认，除非项目有固定尺寸）
- align-items: flex-start —— 对齐到交叉轴起点
- align-items: flex-end —— 对齐到交叉轴终点
- align-items: center —— 居中对齐
- align-items: baseline —— 项目按基线对齐（适用于文本）
单个项目特殊对齐（align-self）
如果只想调整某个项目的交叉轴对齐方式，可以使用 align-self，它会覆盖容器的 align-items 设置：
- align-self: auto —— 使用父容器的 align-items 值（默认）
- align-self: flex-start / flex-end / center / stretch / baseline —— 单独设置该项目的对齐方式
多行排列与换行（flex-wrap 和 align-content）
当项目过多时，可以用 flex-wrap 控制是否换行：
- flex-wrap: nowrap —— 不换行（默认，可能溢出）
- flex-wrap: wrap —— 换行，下一行在下方
- flex-wrap: wrap-reverse —— 换行，但下一行在上方
当多行存在时，align-content 控制行与行之间的对齐方式（类似 justify-content，但用于交叉轴的行）：
- align-content: stretch —— 行拉伸填满容器
- align-content: flex-start / flex-end / center —— 行整体靠起点、终点或居中
- align-content: space-between / space-around —— 行间均匀分布
基本上就这些常见排列方式。灵活组合这些属性，可以实现大多数现代网页布局需求，比如居中、等分布局、顶部/底部对齐等。关键是理解主轴和交叉轴的关系，以及每个属性作用的方向。不复杂但容易忽略细节。
