Flexbox布局即弹性盒布局，是CSS3推出的专门用于解决复杂布局对齐问题的方案，在处理多元素在容器内垂直与水平方向的对齐需求时，相比传统浮动、定位布局有更简洁的实现逻辑，不需要复杂的计算就能完成各类对齐效果。
Flexbox对齐相关的核心属性
要实现多元素的垂直与水平对齐，首先需要了解Flexbox布局下的几个核心对齐属性，这些属性分别控制不同方向、不同场景下的对齐规则。
水平方向对齐属性：justify-content
justify-content用于控制Flex容器内所有子元素在主轴方向（默认是水平从左到右）上的对齐方式，常见取值与效果如下：
- flex-start：子元素靠主轴起点对齐，默认是左对齐
- flex-end：子元素靠主轴终点对齐，即右对齐
- center：子元素在主轴方向居中对齐
- space-between：子元素两端对齐，元素之间的间隔相等
- space-around：子元素两侧的间隔相等，元素之间的间隔比元素与容器边缘的间隔大一倍
- space-evenly：所有间隔完全相等，包括元素与容器边缘的间隔
垂直方向对齐属性：align-items与align-content
align-items用于控制Flex子元素在交叉轴（默认是垂直从上到下）上的对齐方式，适用于单行子元素的垂直对齐场景；align-content则用于控制多行子元素在交叉轴上的对齐方式，仅在子元素换行时生效。
align-items的常见取值：
- stretch：默认值，子元素拉伸填满交叉轴方向的高度
- flex-start：子元素靠交叉轴起点对齐，即顶部对齐
- flex-end：子元素靠交叉轴终点对齐，即底部对齐
- center：子元素在交叉轴方向居中对齐
- baseline：子元素按照第一行文字的基线对齐
多元素水平居中对齐实战
当需要让容器内的多个子元素整体在水平方向居中时，只需要给Flex容器设置justify-content为center即可，示例代码如下：
/* 容器样式 */
.flex-container {
display: flex;
justify-content: center;
width: 100%;
height: 200px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
/* 子元素样式 */
.flex-item {
width: 80px;
height: 80px;
margin: 0 10px;
background-color: #409eff;
color: #fff;
text-align: center;
line-height: 80px;
}
<div class="flex-container">
<div class="flex-item">元素1</div>
<div class="flex-item">元素2</div>
<div class="flex-item">元素3</div>
</div>
上述代码中，容器开启Flex布局后，设置justify-content为center，三个子元素会在容器内水平居中对齐，左右两侧留白相等。
多元素垂直居中对齐实战
实现多元素垂直居中对齐，需要结合align-items属性，当子元素为单行时，设置align-items为center即可让子元素在垂直方向居中，代码如下：
.flex-container {
display: flex;
align-items: center;
width: 100%;
height: 200px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
.flex-item {
width: 80px;
height: 80px;
margin: 0 10px;
background-color: #67c23a;
color: #fff;
text-align: center;
line-height: 80px;
}
<div class="flex-container">
<div class="flex-item">元素1</div>
<div class="flex-item">元素2</div>
<div class="flex-item">元素3</div>
</div>
此时三个子元素会在容器内垂直方向居中，上下留白相等。如果需要同时实现水平与垂直都居中，只需要同时设置justify-content和align-items为center即可。
多行多元素对齐实战
当容器内子元素过多需要换行时，align-items仅对单行元素生效，此时需要使用align-content来控制多行元素的垂直对齐，示例代码如下：
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
width: 100%;
height: 400px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
.flex-item {
width: 80px;
height: 80px;
margin: 10px;
background-color: #e6a23c;
color: #fff;
text-align: center;
line-height: 80px;
}
<div class="flex-container">
<div class="flex-item">元素1</div>
<div class="flex-item">元素2</div>
<div class="flex-item">元素3</div>
<div class="flex-item">元素4</div>
<div class="flex-item">元素5</div>
<div class="flex-item">元素6</div>
</div>
上述代码开启换行后，设置align-content为space-between，多行子元素会在垂直方向两端对齐，行与行之间的间隔相等，同时水平方向通过justify-content实现居中对齐。
单个元素独立对齐技巧
如果需要让某个子元素脱离整体的对齐规则，单独设置对齐方式，可以使用align-self属性，该属性会覆盖容器的align-items设置，示例：
.flex-container {
display: flex;
align-items: center;
width: 100%;
height: 200px;
background-color: #f5f5f5;
border: 1px solid #ddd;
}
.flex-item {
width: 80px;
height: 80px;
margin: 0 10px;
background-color: #f56c6c;
color: #fff;
text-align: center;
line-height: 80px;
}
/* 单独设置第三个元素底部对齐 */
.flex-item:nth-child(3) {
align-self: flex-end;
}
<div class="flex-container">
<div class="flex-item">元素1</div>
<div class="flex-item">元素2</div>
<div class="flex-item">元素3</div>
</div>
此时前两个元素垂直居中，第三个元素会靠容器底部对齐，满足特殊场景下的单个元素对齐需求。