justify-content 控制主轴对齐，align-items 控制交叉轴对齐，二者结合可实现元素在容器中的水平与垂直对齐，如居中、两端对齐等常见布局效果。
在使用 Flexbox 布局时，控制子元素的对齐方式主要依赖主轴（main axis）和交叉轴（cross axis）上的两个关键属性：justify-content 和 align-items。理解它们的作用方向和可选值，能快速实现常见的布局对齐需求。
主轴对齐：justify-content 控制子项沿主轴排列
主轴的方向由 flex-direction 决定，默认是水平向右（row）。justify-content 用于设置子元素在主轴上的对齐方式，适用于存在剩余空间的情况。
- flex-start：子项靠主轴起点对齐（默认值）
- flex-end：靠主轴终点对齐
- center：居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个项目两侧间距相等，视觉间隔均匀
- space-evenly：所有项目之间的间隔完全相等
例如，让导航菜单项水平居中：
nav { display: flex; justify-content: center; }
交叉轴对齐：align-items 控制子项在交叉轴上的对齐
交叉轴垂直于主轴。如果主轴是横向（row），交叉轴就是纵向；反之亦然。align-items 定义子元素在交叉轴上的对齐方式，影响每一行内项目的垂直（或横向）对齐。
- stretch：拉伸填满容器（默认值，前提是子项未设置固定尺寸）
- flex-start：靠交叉轴起点对齐
- flex-end：靠交叉轴终点对齐
- center：在交叉轴上居中对齐
- baseline：按文本基线对齐，适合含文字的混合布局
比如让按钮和输入框在容器中垂直居中：
.form-row { display: flex; align-items: center; }
结合使用实现完整对齐控制
大多数情况下，justify-content 处理水平分布，align-items 处理垂直对齐。两者配合可快速构建响应式结构。
常见组合示例：
- 水平居中 + 垂直居中：
justify-content: center; align-items: center; - 左对齐 + 顶部对齐：
justify-content: flex-start; align-items: flex-start; - 右对齐 + 底部对齐：
justify-content: flex-end; align-items: flex-end;
基本上就这些，掌握主轴与交叉轴的关系，再对应使用 justify-content 和 align-items，就能灵活控制 Flex 容器内的对齐效果。
