CSS布局中align-items与justify-content区别_Flex对齐详解

justify-content控制主轴对齐，align-items控制交叉轴对齐；例如flex-direction:row时，justify-content管水平方向，align-items管垂直方向，二者结合可实现元素居中布局。

在CSS Flex布局中，align-items 和 justify-content 是两个常用的对齐属性，它们控制容器内子元素的排列方式，但作用的方向不同。理解它们的区别，是掌握Flex布局的关键。

主轴与交叉轴：Flex布局的基础方向

Flex布局基于两个轴：主轴（main axis）和交叉轴（cross axis）。子元素沿着主轴排列，而对齐则分别在这两个轴上进行。

• 主轴方向由 flex-direction 决定，默认是 row（从左到右）
• 交叉轴垂直于主轴。例如主轴为 row 时，交叉轴就是 vertical（从上到下）

justify-content：控制主轴上的对齐

justify-content 调整子元素在主轴方向上的分布方式，适用于有剩余空间的情况。

• flex-start：元素向主轴起点对齐（默认）
• flex-end：向主轴终点对齐
• center：居中对齐
• space-between：两端对齐，中间间距相等
• space-around：每个元素周围有相等空间
• space-evenly：所有元素间及边缘间距完全相等

例如：flex-direction: row 时，justify-content 控制左右分布；若设为 column，则控制上下分布。

align-items：控制交叉轴上的对齐

align-items 定义子元素在交叉轴上的对齐方式，类似于 justify-content，但方向不同。

• flex-start：向交叉轴起点对齐
• flex-end：向交叉轴终点对齐
• center：交叉轴居中
• stretch：拉伸以填满容器（默认，前提无固定高度）
• baseline：按文本基线对齐

比如容器高度大于子元素时，使用 center 可让所有项目垂直居中。

实际例子对比

假设有一个横向排列的Flex容器：

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

效果是：子元素在水平方向居中（主轴），同时在垂直方向也居中（交叉轴），实现真正的居中对齐。

基本上就这些。记住：justify-content 管“主方向”，align-items 管“垂直方向”，结合 flex-direction 就能准确判断它们的作用。不复杂但容易忽略方向依赖。