在网页布局开发中，经常会遇到多个并排元素需要垂直对齐的场景，比如导航栏里的图标和文字、卡片内的标题和描述文字，这些元素高度不一致时，传统浮动或者定位布局很难快速实现理想的垂直对齐效果，而CSS Flexbox布局可以轻松解决这个问题。
Flexbox布局的基础概念
Flexbox是CSS3引入的弹性盒子布局模型，核心是通过给容器设置display: flex属性，让容器内的子元素成为弹性项目，容器可以灵活控制子元素的排列方向、对齐方式、空间分配等。要实现并排元素的垂直对齐，首先需要明确两个核心角色：
- Flex容器：设置了
display: flex的父元素，控制所有子元素的整体布局规则 - Flex项目：Flex容器内的直接子元素，遵循容器的布局规则，也可以单独设置自身的对齐属性
核心垂直对齐属性
align-items：控制所有子元素的垂直对齐
align-items是Flex容器的属性，用于设置容器内所有弹性项目在交叉轴（默认是垂直方向）上的对齐方式，常用取值如下：
| 属性值 | 作用说明 |
|---|---|
| stretch | 默认值，子元素会被拉伸到和容器高度一致，前提是子元素没有设置固定高度 |
| flex-start | 所有子元素顶部对齐，靠交叉轴起点对齐 |
| flex-end | 所有子元素底部对齐，靠交叉轴终点对齐 |
| center | 所有子元素垂直居中对齐 |
| baseline | 所有子元素按照第一行文字的基线对齐 |
下面是一个基础示例，实现三个不同高度的并排元素垂直居中对齐：
/* 容器样式 */
.flex-container {
display: flex;
/* 设置垂直居中对齐 */
align-items: center;
width: 100%;
height: 200px;
background-color: #f5f5f5;
padding: 10px;
}
/* 子元素通用样式 */
.flex-item {
margin: 0 10px;
background-color: #4CAF50;
color: white;
padding: 10px;
}
/* 不同高度的子元素 */
.item1 {
height: 40px;
}
.item2 {
height: 80px;
}
.item3 {
height: 60px;
}
<div class="flex-container">
<div class="flex-item item1">高度40px</div>
<div class="flex-item item2">高度80px</div>
<div class="flex-item item3">高度60px</div>
</div>
align-self：单独控制某个子元素的垂直对齐
如果希望某个子元素脱离容器的整体对齐规则，单独设置垂直对齐方式，可以使用align-self属性，该属性作用于Flex项目，取值和align-items一致，会覆盖容器设置的align-items规则。
比如上面的示例中，希望第二个元素底部对齐，其他元素保持居中，可以修改样式如下：
.flex-container {
display: flex;
align-items: center;
width: 100%;
height: 200px;
background-color: #f5f5f5;
padding: 10px;
}
.flex-item {
margin: 0 10px;
background-color: #4CAF50;
color: white;
padding: 10px;
}
.item1 {
height: 40px;
}
/* 第二个元素单独设置底部对齐 */
.item2 {
height: 80px;
align-self: flex-end;
}
.item3 {
height: 60px;
}
常见垂直对齐场景实现
场景1：图标和文字并排垂直居中
导航栏或者功能入口经常需要图标和文字并排，且两者垂直居中，传统方案可能需要设置行高或者定位，用Flexbox只需要给父容器设置display: flex和align-items: center即可。
.nav-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background-color: #fff;
border: 1px solid #eee;
}
.icon {
width: 20px;
height: 20px;
background-color: #2196F3;
border-radius: 50%;
}
.text {
font-size: 14px;
}
<div class="nav-item">
<div class="icon"></div>
<span class="text">首页</span>
</div>
场景2：卡片内多元素底部对齐
商品卡片通常包含图片、标题、价格、购买按钮，需要让购买按钮始终靠底部对齐，其他元素正常排列，可以给卡片容器设置display: flex，设置flex-direction: column改为垂直排列，然后给购买按钮设置margin-top: auto，或者给容器设置justify-content: space-between，再配合align-items控制水平方向的对齐。
.card {
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
height: 300px;
border: 1px solid #eee;
padding: 15px;
box-sizing: border-box;
}
.card-img {
width: 100%;
height: 120px;
background-color: #f0f0f0;
margin-bottom: 10px;
}
.card-title {
font-size: 16px;
margin-bottom: 10px;
}
.card-price {
color: #f44336;
font-size: 18px;
margin-bottom: 15px;
}
/* 购买按钮自动顶到下方 */
.card-btn {
margin-top: auto;
padding: 8px 20px;
background-color: #ff9800;
color: white;
border: none;
border-radius: 4px;
}
<div class="card">
<div class="card-img"></div>
<div class="card-title">商品名称</div>
<div class="card-price">￥99.9</div>
<button class="card-btn">立即购买</button>
</div>
和传统布局方案的对比
传统实现并排元素垂直对齐的常用方案有：
- 使用
vertical-align: middle：仅对行内元素或表格单元格有效，对块级并排元素支持不好，且容易受行高影响出现偏差 - 使用绝对定位：需要给父容器设置相对定位，子元素设置绝对定位加
top: 50%和transform: translateY(-50%)，代码冗余，且脱离文档流容易影响其他元素布局 - 使用表格布局：需要把元素改成表格结构，语义化差，不够灵活
而Flexbox布局只需要几行属性就能实现各种垂直对齐需求，且不会脱离文档流，适配各种屏幕尺寸，是当前实现这类布局的首选方案。
注意事项
使用Flexbox做垂直对齐时，需要注意Flex容器的高度设置，如果容器没有明确的高度，align-items的效果可能无法正常体现，因为交叉轴的长度由内容决定。另外，如果子元素设置了float、clear、vertical-align属性，在Flex容器中会失效，不需要额外设置。
掌握Flexbox的align-items和align-self属性，就能轻松解决绝大多数并排元素的垂直对齐问题，大幅减少布局开发的时间成本，建议在实际项目中优先使用。