在CSS的flex弹性布局体系中，align-items和justify-content是控制子元素对齐方式的核心属性，两者分别作用于交叉轴和主轴方向，合理的组合使用可以实现绝大多数常见的布局对齐需求。
两个属性的基础作用
首先需要明确flex布局的主轴和交叉轴概念，默认情况下flex容器的主轴是水平方向，交叉轴是垂直方向。justify-content用于控制子元素在主轴方向的对齐方式，align-items用于控制子元素在交叉轴方向的对齐方式。
justify-content的常用取值
- flex-start：子元素向主轴起点对齐
- flex-end：子元素向主轴终点对齐
- center：子元素在主轴方向居中对齐
- space-between：子元素两端对齐，中间间隔相等
- space-around：子元素两侧间隔相等，视觉上间隔是两端间隔的两倍
- space-evenly：所有间隔完全相等
align-items的常用取值
- flex-start：子元素向交叉轴起点对齐
- flex-end：子元素向交叉轴终点对齐
- center：子元素在交叉轴方向居中对齐
- stretch：子元素拉伸填满交叉轴方向的高度（子元素未设置固定高度时生效）
- baseline：子元素以第一行文字的基线对齐
常见组合布局场景
场景1：水平垂直居中对齐
这是最常见的布局需求，只需要将justify-content和align-items都设置为center即可。
/* 容器样式 */
.container {
display: flex;
/* 主轴水平居中 */
justify-content: center;
/* 交叉轴垂直居中 */
align-items: center;
width: 500px;
height: 300px;
background-color: #f0f0f0;
}
/* 子元素样式 */
.item {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 100px;
}
对应的HTML结构如下：
<div class="container">
<div class="item">居中元素</div>
</div>
场景2：底部水平均匀分布
当需要子元素在容器底部排列，并且水平方向均匀分布时，可以组合justify-content: space-between和align-items: flex-end。
.bottom-layout {
display: flex;
/* 水平方向两端对齐 */
justify-content: space-between;
/* 垂直方向底部对齐 */
align-items: flex-end;
width: 600px;
height: 400px;
background-color: #e8e8e8;
padding: 0 20px;
box-sizing: border-box;
}
.bottom-item {
width: 80px;
height: 120px;
background-color: #2196F3;
color: white;
text-align: center;
line-height: 120px;
}
场景3：顶部左对齐且子元素等宽排列
如果需要子元素在左上角排列，同时水平方向等间隔分布，可以使用justify-content: space-around配合align-items: flex-start。
.top-left-layout {
display: flex;
/* 水平方向等间隔分布 */
justify-content: space-around;
/* 垂直方向顶部对齐 */
align-items: flex-start;
width: 700px;
height: 350px;
background-color: #f5f5f5;
padding-top: 20px;
}
.top-item {
width: 120px;
height: 80px;
background-color: #FF9800;
color: white;
text-align: center;
line-height: 80px;
}
注意事项
1. 两个属性只有在flex容器上设置才会生效，普通块级容器不生效。
2. 如果修改了flex-direction属性，主轴和交叉轴的方向会互换，此时justify-content和align-items控制的方向也会对应变化。
3. align-items的stretch取值仅在子元素没有设置交叉轴方向的固定尺寸时才会生效，如果子元素设置了固定高度或宽度，拉伸效果会失效。
4. 当子元素存在多行时，交叉轴的对齐效果可以使用align-content属性控制，此时align-items的效果会被覆盖。
总结
通过align-items和justify-content的组合，可以灵活实现各种对齐布局需求，核心是明确两个属性分别控制的方向，再根据实际场景选择合适的取值。开发中可以先确定主轴和交叉轴的对齐目标，再对应选择属性值，能大幅提升布局效率。
cssflexboxalign-itemsjustify-content前端布局修改时间：2026-06-17 15:00:31