justify-content控制主轴对齐，align-items控制交叉轴对齐；二者均作用于flex容器，需确保父容器有明确尺寸且正确声明display:flex和flex-direction。
justify-content 控制主轴方向的对齐方式
它只作用于 flex 容器，决定子元素在主轴（flex-direction 决定）上的分布位置。常见值有 flex-start、center、space-between 等，但要注意：如果容器没有设定明确宽度（或高度，取决于主轴方向），space-around 或 space-evenly 可能看起来“没效果”，因为浏览器按内容撑开容器后，剩余空间为 0。
使用时需确认两点：
-
display: flex已在父容器上声明 -
flex-direction的值（默认row，主轴为水平；设为column后主轴变垂直，justify-content就控制上下对齐）
.container {
display: flex;
flex-direction: row; /* 主轴水平 */
justify-content: space-between;
}align-items 控制交叉轴方向的单行对齐
它也作用于 flex 容器，但影响的是交叉轴（与主轴垂直的方向）上所有子项的对齐。例如主轴是 row，交叉轴就是垂直方向，align-items: center 就让所有子项垂直居中。
容易被忽略的关键点：
立即学习“前端免费学习笔记（深入）”；
-
align-items对单行和多行 flex 容器都生效，但仅对“当前行内”的子项起作用；若子项换行（flex-wrap: wrap），每行独立应用该值 - 它不控制子项自身内容的对齐（比如文字在子项内部怎么排），那是子项自己的
text-align或align-self的事 -
stretch是默认值，会让子项在交叉轴方向拉伸填满容器高度（或宽度），若子项设了固定height或min-height，则拉伸失效
.container {
display: flex;
align-items: center; /* 所有子项垂直居中（主轴为 row 时） */
}justify-content 和 align-items 一起用时的常见错觉
很多人以为同时设 justify-content: center 和 align-items: center 就一定能“真正居中”一个元素，结果发现没动。问题往往出在：
- 父容器没有设定尺寸（如
height: 100vh），导致交叉轴长度为 0，align-items无空间可对齐 - 父容器被其他 CSS（如
margin: auto、浮动、绝对定位）干扰，实际未形成有效 flex 上下文 - 子项本身有
margin或padding，视觉上偏移，误以为对齐失效
最简验证方式：给父容器加 border: 1px solid red，看是否真的撑开了；再给子项加 background: cyan，确认它是否真在容器内部。
align-self 覆盖 align-items 的例外情况
当某个子项需要单独对齐，而其他子项保持统一时，用 align-self。它的取值和 align-items 一致（flex-start、center、stretch 等），且优先级更高。
注意：
-
align-self只对 flex 子项生效，普通块级元素无效 - 设为
auto（默认）时，会继承父容器的align-items值 - 若父容器
align-items是stretch，而某子项设了align-self: flex-start，该子项就不会被拉伸，哪怕它没设高度
.item.special {
align-self: flex-end; /* 单独靠交叉轴末端对齐 */
}flex 布局真正的难点不在属性名，而在主轴/交叉轴的动态切换、容器尺寸是否可控、以及子项是否“老实”（有没有溢出、固定尺寸或 margin 干扰）。调的时候先画出主轴箭头，再看容器有没有实际可用空间，比死记属性值管用得多。
