控制子元素在主轴上的对齐方式
通过 justify-content 属性可以设置子元素在主轴上的对齐方式：
属性值 | 效果 | 说明 |
|---|---|---|
| 子元素靠左对齐（默认值） | 主轴起点对齐（水平方向：左对齐） |
| 子元素靠右对齐 | 主轴终点对齐（水平方向：右对齐） |
| 子元素居中对齐 | 主轴中心对齐 |
| 子元素均匀分布，首尾贴边 | 第一个子元素靠左，最后一个子元素靠右，中间均分剩余空间 |
| 子元素均匀分布，两侧留半份空间 | 每个子元素两侧的间隔相等 |
| 子元素均匀分布，两侧留相同空间 | 每个子元素两侧的间隔完全相同 |
控制子元素在辅轴上的对齐方式
通过 align-items、align-self 和 align-content 属性可以设置子元素在辅轴上的对齐方式：
属性 | 属性值 | 效果 | 说明 |
|---|---|---|---|
** |
| 子元素在辅轴起点对齐 | 主轴为水平方向时，垂直方向上靠上对齐；主轴为垂直方向时，水平方向上靠左对齐 |
| 子元素在辅轴终点对齐 | 主轴为水平方向时，垂直方向上靠下对齐；主轴为垂直方向时，水平方向上靠右对齐 | |
| 子元素在辅轴中间对齐 | 主轴为水平方向时，垂直方向上居中对齐；主轴为垂直方向时，水平方向上居中对齐 | |
| 子元素拉伸填充辅轴空间（默认值） | 子元素高度/宽度会撑满容器（前提是子元素未设置固定尺寸） | |
| 子元素按基线对齐 | 文本基线对齐，适用于文字内容对齐的场景 | |
** |
| 继承父容器的 | 可覆盖单个子项的对齐方式 |
| 子元素在辅轴起点对齐 | 同 | |
| 子元素在辅轴终点对齐 | 同 | |
| 子元素在辅轴中间对齐 | 同 | |
| 子元素拉伸填充辅轴空间 | 同 | |
| 子元素按基线对齐 | 同 | |
** |
| 所有行在辅轴起点对齐 | 多行Flex布局时生效，所有行整体靠上/左对齐 |
| 所有行在辅轴终点对齐 | 多行Flex布局时生效，所有行整体靠下/右对齐 | |
| 所有行在辅轴中间对齐 | 多行Flex布局时生效，所有行整体居中对齐 | |
| 所有行拉伸填充辅轴空间（默认值） | 多行Flex布局时生效，行高/宽度撑满剩余空间 | |
| 行在辅轴上均匀分布，首尾贴边 | 多行Flex布局时生效，第一行靠起点，最后一行靠终点，中间均分剩余空间 | |
| 行在辅轴上均匀分布，两侧留半份空间 | 多行Flex布局时生效，每行周围间隔相等 | |
| 行在辅轴上均匀分布，两侧留相同空间 | 多行Flex布局时生效，每行间隔完全相同 |