justify-content 控制主轴对齐，align-items 控制交叉轴对齐；主轴由 flex-direction 决定（row 为水平，column 为垂直），二者作用方向始终正交，且不改变元素自身尺寸。
justify-content 控制主轴上的元素分布
justify-content 只作用于 flex 容器的主轴（main axis），决定子元素在该方向上的对齐与间距方式。主轴方向由 flex-direction 决定：默认是 row（从左到右），此时主轴水平；设为 column 时主轴就变成垂直。
常见值的效果取决于主轴朝向：
-
justify-content: flex-start→ 元素紧贴主轴起点（row时靠左，column时靠上） -
justify-content: center→ 元素沿主轴居中（水平居中 or 垂直居中，看主轴方向） -
justify-content: space-between→ 首尾元素贴住两端，中间等距
它**不改变元素自身尺寸或交叉轴位置**，只调整它们在主轴方向的“排队方式”。
align-items 控制交叉轴上的单行元素对齐
align-items 作用于交叉轴（cross axis），即与主轴垂直的方向。它对容器内**每一行**的 flex 项目生效（多行时需配合 align-content）。
立即学习“前端免费学习笔记（深入）”；
例如：flex-direction: row 时，主轴水平、交叉轴垂直，align-items 就控制上下对齐；反过来 flex-direction: column 时，它就控制左右对齐。
典型取值行为：
-
align-items: stretch（默认）→ 拉伸子元素填满交叉轴（除非设置了固定宽/高） -
align-items: center→ 子元素在交叉轴方向居中（row下是垂直居中） -
align-items: flex-start→ 贴交叉轴起点（row下是顶部对齐）
主轴 vs 交叉轴容易混淆的两个点
很多人调不对效果，往往卡在这两个地方：
- 没确认
flex-direction的实际值——它直接翻转主/交叉轴定义，justify-content和align-items的表现会完全互换 - 给子元素设了
height或width后，align-items: stretch失效，但误以为属性没起作用 - 容器有多行 flex 项目时，
align-items只管每行内部对齐；行与行之间的间距得用align-content
.container {
display: flex;
flex-direction: row; /* 主轴：水平；交叉轴：垂直 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}快速验证主轴/交叉轴方向的方法
加一条临时边框 + 文字提示最直观：
.container {
display: flex;
border: 2px solid red; /* 看容器边界 */
}
.container::before {
content: "main: row | cross: column";
position: absolute;
font-size: 12px;
color: #999;
}或者在浏览器开发者工具里选中容器，勾选「Show Flexbox overlays」（Chrome / Edge 支持），会直接标出主轴箭头和交叉轴箭头。
别依赖记忆哪边是主轴，每次不确定就查 flex-direction，再对应看 justify-content 动的是哪条线——这是最稳的判断路径。
