Flexbox是CSS3引入的弹性盒布局模型，专门用于处理一维方向的布局对齐问题，相比传统的浮动、定位布局，它能用更少的代码实现复杂内容块的垂直与水平对齐，大幅降低布局复杂度。
Flexbox布局核心对齐属性
要实现内容块的对齐，首先需要了解Flexbox的几个核心属性，这些属性分别控制不同方向的对齐效果：
- flex-direction：定义主轴方向，可选值有row（水平从左到右，默认）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）
- justify-content：控制主轴方向的内容对齐方式，可选值包括flex-start、flex-end、center、space-between、space-around、space-evenly
- align-items：控制交叉轴方向的内容对齐方式，可选值包括flex-start、flex-end、center、baseline、stretch
- align-self：单独控制某个子元素在交叉轴的对齐方式，优先级高于align-items
水平居中对齐实现
当主轴为水平方向时，要实现内容块水平居中，只需要设置justify-content为center即可，交叉轴垂直居中则设置align-items为center。
/* 父容器样式 */
.container {
display: flex;
/* 主轴水平方向，内容居中 */
justify-content: center;
/* 交叉轴垂直方向，内容居中 */
align-items: center;
width: 100%;
height: 300px;
background-color: #f5f5f5;
}
/* 子内容块样式 */
.content-block {
width: 200px;
height: 100px;
background-color: #409eff;
color: #fff;
text-align: center;
line-height: 100px;
}
对应的HTML结构如下：
<div class="container">
<div class="content-block">水平垂直居中内容块</div>
</div>
垂直排列内容块的对齐
当主轴设置为垂直方向（column）时，justify-content控制垂直方向的对齐，align-items控制水平方向的对齐，我们可以实现垂直排列的内容块对齐效果。
.vertical-container {
display: flex;
/* 主轴改为垂直方向 */
flex-direction: column;
/* 垂直方向内容居中 */
justify-content: center;
/* 水平方向内容居中 */
align-items: center;
width: 100%;
height: 400px;
background-color: #f0f0f0;
gap: 20px;
}
.vertical-item {
width: 150px;
height: 60px;
background-color: #67c23a;
color: #fff;
text-align: center;
line-height: 60px;
}
HTML结构：
<div class="vertical-container">
<div class="vertical-item">垂直项1</div>
<div class="vertical-item">垂直项2</div>
<div class="vertical-item">垂直项3</div>
</div>
复杂多内容块对齐场景
当容器内存在多个不同尺寸的内容块，需要实现整体对齐且子元素有单独对齐需求时，可以结合align-self属性实现。
.complex-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
height: 350px;
padding: 20px;
background-color: #e8e8e8;
box-sizing: border-box;
}
.complex-item {
width: 120px;
background-color: #e6a23c;
color: #fff;
text-align: center;
padding: 10px 0;
}
/* 第一个子元素垂直居中 */
.item1 {
align-self: center;
height: 80px;
line-height: 80px;
}
/* 第二个子元素底部对齐 */
.item2 {
align-self: flex-end;
height: 120px;
line-height: 120px;
}
/* 第三个子元素保持默认顶部对齐 */
.item3 {
height: 60px;
line-height: 60px;
}
HTML结构：
<div class="complex-container">
<div class="complex-item item1">居中项</div>
<div class="complex-item item2">底部项</div>
<div class="complex-item item3">顶部项</div>
</div>
常见问题与注意事项
在使用Flexbox实现对齐时，需要注意以下几点：
- 父容器必须设置display: flex才会生效Flexbox相关属性，否则子元素不会按照弹性布局规则排列
- 当子元素的总尺寸超过父容器时，默认会收缩，可通过flex-shrink属性控制收缩比例，避免内容溢出
- 如果需要对齐的是行内元素，建议先将其设置为块级元素或直接使用Flexbox容器包裹，避免对齐效果不符合预期
- Flexbox是一维布局，若需要同时处理水平和垂直两个维度的复杂网格布局，可结合Grid布局使用
Flexbox布局的对齐能力远不止上述内容，实际开发中可根据需求灵活组合属性，适配不同的布局场景，大幅提升开发效率。