什么是 CSS Flexbox
CSS Flexbox 是一种布局模式，它的目的是提供一种更加灵活的方式来排列元素。与传统的布局方式（如浮动、定位）不同，Flexbox 可以同时处理元素的尺寸和位置。Flexbox 的主要特点包括：
- 容器轴（main axis）和交叉轴（cross axis）
- 伸缩（stretching）、对齐（aligning）和分配空间（distributing space）的能力
- 嵌套性（nesting）
Flexbox 的 Vertical Alignment Bug
当使用 Flexbox 进行垂直居中对齐时，可能会出现一些问题。尤其是当容器高度不固定、元素高度不同的时候，很容易出现元素不居中的情况。这是因为 Flexbox 默认的对齐方式是基于元素的 baseline，而不是元素本身的高度。
示例代码
下面是一个简单的 Flexbox 布局示例，包含两个元素（红色和蓝色）：
<div class="container"> <div class="red-box"></div> <div class="blue-box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- - -------- - ------- ------ ----------------- ---- - --------- - ------- ----- ----------------- ----- -
这个示例中，容器采用了 Flexbox 布局，并通过 align-items: center; 属性进行垂直居中对齐。红色元素高度为 100px，蓝色元素高度为 50px。预期结果是，两个元素会在容器中垂直居中对齐。
然而，实际上的结果是这样的：
可以看到，红色元素与蓝色元素之间的距离并不一致，红色元素偏向了容器的顶部。这是由于 Flexbox 默认的对齐方式是基于元素的 baseline。在这个示例中，红色元素的 baseline 会比蓝色元素的 baseline 更高，导致红色元素偏向了容器的顶部。
解决方式
使用 vertical-align
一种解决方式是使用 vertical-align 属性对元素进行对齐。vertical-align 属性可以用于行内元素和表格单元格元素，但也可以应用于 Flexbox 元素。只需要将容器设置为 display: inline-flex; 并在元素上设置 vertical-align: middle; 即可实现垂直居中对齐。
下面是修改后的示例代码：
.container {
display: inline-flex;
}
.red-box, .blue-box {
vertical-align: middle;
}这样修改后，两个元素可以在容器中垂直居中对齐：
使用伸缩属性
另一种解决方式是使用伸缩属性。Flexbox 的伸缩属性包括 flex-grow、flex-shrink 和 flex-basis。其中，flex-grow 属性决定元素在剩余空间中的分配比例，flex-shrink 属性决定元素缩小的比例，flex-basis 属性决定元素的初始大小。通过设置 flex-grow: 1; flex-shrink: 1; 和 flex-basis: 0;，可以将元素自动扩展以填充剩余空间，并将它们设置为相等的高度。
下面是修改后的示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- - --------- --------- - ---------- -- ------------ -- ----------- -- -
这样修改后，两个元素可以在容器中垂直居中对齐：
总结
CSS Flexbox 是一种强大的布局模式，但在垂直居中对齐方面存在一些问题。解决这个问题的两种方式包括使用 vertical-align 属性和使用伸缩属性。这些技巧可以帮助开发人员更好地掌握 Flexbox，并提高网站的布局质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c6324f10032fedd38bc5b0