在CSS弹性布局中，align-items与justify-content是两个最核心的对齐属性，但它们作用的维度完全不同。很多布局问题并不是代码写错，而是把主轴和交叉轴搞反了。理解这两个属性，首先要明白flex容器在渲染时如何确立方向。
一、主轴与交叉轴的基础概念
弹性盒模型通过display: flex声明容器，其内部子项成为弹性项目。容器存在一个主轴（main axis）和一个交叉轴（cross axis）。默认情况下，flex-direction: row让主轴沿水平方向从左到右，交叉轴则垂直向下；若设为column，主轴变为垂直方向，交叉轴变成水平方向。
justify-content专门用来分配主轴方向上的剩余空间，控制项目之间的间距与起止位置。align-items则决定项目在交叉轴方向上的对齐方式，也就是项目如何填满或贴合交叉轴。二者分工明确，但都依赖于flex-direction所设定的轴朝向，因此改动方向属性会直接反转它们的视觉表现。
1.1 默认表现示例
下面这段代码创建一个横向弹性容器，子项在水平主轴自然排列，垂直交叉轴方向拉伸填满：
.container {
display: flex;
flex-direction: row;
/* 主轴水平，justify-content默认flex-start */
/* 交叉轴垂直，align-items默认stretch */
}
.item {
height: 50px;
}
此时若不写align-items，项目高度会被拉伸至容器高度；若容器无固定高度，则按内容高度呈现。这就是默认交叉轴拉伸行为带来的直观差异。
二、justify-content的常见取值与效果
justify-content控制主轴剩余空间的分布，常用值包括flex-start、flex-end、center、space-between、space-around和space-evenly。以横向布局为例，flex-start让项目靠左，center居中，space-between首尾贴边且中间均分空隙。
space-around会给每个项目左右相等留白，导致两端空白是中间的一半；space-evenly则让所有间隔完全相等。选择哪种取决于设计稿要求的间距逻辑。以下示例展示横向居中及两端对齐：
.row-box {
display: flex;
flex-direction: row;
justify-content: space-between;
background: #f0f0f0;
padding: 10px;
}
.row-box .cell {
width: 60px;
height: 60px;
background: #409eff;
}
上述代码会让三个色块分别贴在容器左、中、右边缘，中间空隙一致。如果改成center，则三组块整体居中，左右留白相同。注意justify-content对单行有效，多行换行场景需用align-content处理交叉轴多行分布。
2.1 与margin的冲突
当子项使用margin-left: auto时，它会吞掉左侧剩余空间，此时justify-content的space类取值会被抵消。这是实践中容易忽略的点：自动外边距优先级高于justify-content的空间分配。
三、align-items的取值与对齐逻辑
align-items决定交叉轴对齐，常见值有stretch、flex-start、flex-end、center、baseline。stretch要求项目不固定交叉轴尺寸时拉伸；center让项目在交叉轴居中，不管主轴如何排布。
以下例子把横向容器的项目垂直居中，而不影响水平排列：
.vcenter {
display: flex;
flex-direction: row;
align-items: center;
height: 120px;
border: 1px solid #ccc;
}
.vcenter .box {
width: 80px;
height: 40px;
background: #67c23a;
}
这里容器高120px，子项高40px，因为align-items为center，绿色块垂直悬于中间。若将值改为flex-end，则贴底。可见align-items只动交叉轴，主轴仍由justify-content或默认规则控制。
3.1 baseline的特殊性
baseline按文字基线对齐，适合混合不同字体大小的项目排成一行。它依赖内容文本线，而非盒子边缘，在表单控件与文本混排时尤为实用。
四、典型误用与排查思路
最常见错误是在横向布局中想垂直居中却写了justify-content: center，结果只是水平居中。另一错误是容器没设高度，却期望align-items: center有明显垂直位移，因为交叉轴无空间可供居中。
排查时先确认flex-direction，再问自己要对齐的是哪个轴。若轴朝向反转，原本的justify-content就控制垂直分布了。用浏览器审查工具查看容器坐标轴标识，能快速定位属性是否用错。
<div class="wrap"> <span class="a">左</span> <span class="b">中</span> <span class="c">右</span> </div>
配合样式.wrap{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:80px;}，即可实现水平均布且垂直居中的导航条。掌握轴概念后，两个属性便不再容易混淆。
cssflexboxalign-items修改时间：2026-08-02 03:00:26