Flexbox通过justify-content设置主轴对齐，align-items控制交叉轴对齐，align-self单独调整子元素，align-content管理多行行间对齐，实现灵活布局。
在使用 Flexbox 布局时，可以通过 CSS 控制子元素的对齐方式。主要涉及两个方向的对齐：主轴（horizontal）和交叉轴（vertical）。下面介绍几个关键属性及其用法。
1. justify-content：控制主轴上的对齐
该属性用于设置 flex 子元素在主轴（默认是水平方向）上的对齐方式。常见取值包括：
- flex-start：子元素向主轴起点对齐（默认值）
- flex-end：子元素向主轴终点对齐
- center：子元素在主轴居中对齐
- space-between：子元素之间间距相等，首尾元素贴边
- space-around：每个子元素周围有相等的空间
- space-evenly：子元素之间的间距以及与容器边缘的间距都相等
.container {
display: flex;
justify-content: center; /* 水平居中 */
}2. align-items：控制交叉轴上的对齐
该属性定义子元素在交叉轴（默认是垂直方向）上的对齐方式。常用值有：
- stretch：子元素拉伸填满容器（默认值，前提是子元素没有设置高度）
- flex-start：子元素在交叉轴起点对齐
- flex-end：子元素在交叉轴终点对齐
- center：子元素在交叉轴居中对齐
- baseline：子元素按基线对齐
.container {
display: flex;
align-items: center; /* 垂直居中 */
}3. align-self：单独控制某个子元素的对齐
如果只想调整某一个子元素在交叉轴上的对齐方式，可以使用 align-self，它会覆盖父容器的 align-items 设置。
立即学习“前端免费学习笔记（深入）”；
- 取值与 align-items 相同
.item {
align-self: flex-end; /* 这个子元素在交叉轴底部对齐 */
}4. align-content：多行 flex 容器中行的对齐
当 flex 容器换行（flex-wrap: wrap）且有多行时，此属性控制行与行之间的对齐方式。单行情况下无效。
- stretch：各行均匀拉伸填满容器
- center：行整体在交叉轴居中
- flex-start：行从交叉轴起点排列
- flex-end：行从交叉轴终点排列
- space-between：行之间间距平均分布
- space-around：每行周围有均匀空间
基本上就这些。合理组合这几个属性，就能实现各种常见的布局需求，比如水平垂直居中、两端对齐、顶部对齐等。
