在CSS弹性布局中，align-items和justify-content是控制flex子元素对齐的核心属性，二者分别作用于交叉轴和主轴方向，配合不同的取值可以实现多种对齐效果，满足不同的页面布局需求。
flex布局基础概念
使用flex布局前需要先给容器设置display: flex属性，此时容器会变为flex容器，内部直接子元素会成为flex子元素。flex布局默认存在主轴和交叉轴两个方向，主轴默认是水平方向，交叉轴默认是垂直方向，主轴方向可以通过flex-direction属性修改。
主轴与交叉轴的区别
- 主轴：flex子元素默认沿主轴排列，方向由
flex-direction决定，默认从左到右 - 交叉轴：与主轴垂直的轴，默认从上到下
justify-content属性详解
justify-content用于控制flex子元素在主轴方向的对齐方式，所有取值都作用于主轴维度，不会影响交叉轴方向的位置。
常用取值及效果
| 取值 | 对齐效果 |
|---|---|
| flex-start | 子元素向主轴起点对齐，默认值 |
| flex-end | 子元素向主轴终点对齐 |
| center | 子元素在主轴方向居中对齐 |
| space-between | 子元素两端对齐，相邻子元素间距相等 |
| space-around | 每个子元素两侧间距相等，两端子元素与容器间距是相邻子元素间距的一半 |
| space-evenly | 所有间距完全相等，包括两端子元素与容器的间距 |
代码示例
以下代码实现flex子元素水平居中对齐：
/* 容器样式 */
.flex-container {
display: flex;
/* 主轴水平方向居中对齐 */
justify-content: center;
width: 500px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* 子元素样式 */
.flex-item {
width: 80px;
height: 80px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 80px;
margin: 0 5px;
}
<div class="flex-container">
<div class="flex-item">子元素1</div>
<div class="flex-item">子元素2</div>
<div class="flex-item">子元素3</div>
</div>
align-items属性详解
align-items用于控制flex子元素在交叉轴方向的对齐方式，取值作用于交叉轴维度，不会影响主轴方向的排列。
常用取值及效果
| 取值 | 对齐效果 |
|---|---|
| stretch | 子元素拉伸填满交叉轴方向容器高度，默认值，子元素未设置交叉轴方向尺寸时生效 |
| flex-start | 子元素向交叉轴起点对齐 |
| flex-end | 子元素向交叉轴终点对齐 |
| center | 子元素在交叉轴方向居中对齐 |
| baseline | 子元素按第一行文字的基线对齐 |
代码示例
以下代码实现flex子元素垂直居中对齐：
/* 容器样式 */
.flex-container {
display: flex;
/* 交叉轴垂直方向居中对齐 */
align-items: center;
width: 500px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* 子元素样式，设置不同高度展示效果 */
.flex-item {
width: 80px;
background-color: #4CAF50;
color: white;
text-align: center;
margin: 0 5px;
}
.item1 {
height: 60px;
line-height: 60px;
}
.item2 {
height: 100px;
line-height: 100px;
}
.item3 {
height: 80px;
line-height: 80px;
}
<div class="flex-container">
<div class="flex-item item1">子元素1</div>
<div class="flex-item item2">子元素2</div>
<div class="flex-item item3">子元素3</div>
</div>
二者配合使用实现完全居中
如果需要让flex子元素在容器中完全水平垂直居中，只需要同时设置justify-content和align-items为center即可，这是flex布局中最常用的居中方案。
.flex-container {
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
width: 500px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.flex-item {
width: 80px;
height: 80px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 80px;
}
注意事项
- 如果修改了
flex-direction为column，主轴会变为垂直方向，此时justify-content控制垂直对齐，align-items控制水平对齐 - align-items的stretch取值仅在子元素未设置交叉轴方向尺寸时生效，若子元素已设置固定高度或宽度，该取值不会生效
- 两个属性都仅对flex容器的直接子元素生效，嵌套的子元素需要单独设置flex布局才会生效
flexalign-itemsjustify-contentcontrol_align修改时间：2026-07-05 12:21:26