Flexbox 是 CSS 的一项新特性，它可以灵活地排列元素，并且可以轻松地实现垂直和水平居中。但是在使用 Flexbox 布局的过程中，有时会遇到子元素在垂直方向上无法对齐的问题，如何解决这个问题呢？
问题描述
假设我们有一个父元素和三个子元素，代码如下：
<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>
我们想要实现三个子元素在父元素内均匀分布，并且每个子元素都在垂直方向上与父元素顶部对齐。于是我们可以使用 display: flex; 和 align-items: flex-start; 属性来实现，代码如下：
-- -------------------- ---- ------- ------- - -------- ----- ------------ ----------- ------- ------ - ------ - ------ ------ ------- ------ ----------------- ----- -
这时候我们会发现，子元素并没有与父元素的顶部对齐，如图所示：
解决方法
根据 Flexbox 布局的规则，只有在父元素设置了高度的情况下，align-items: flex-start; 才会对子元素生效。因此，我们只需要在父元素上添加一个 height 属性，即可实现子元素在垂直方向上与父元素顶部对齐，如下所示：
-- -------------------- ---- ------- ------- - -------- ----- ------------ ----------- ------- ------ - ------ - ------ ------ ------- ------ ----------------- ----- -
总结
在 Flexbox 布局中，子元素垂直对齐失效的问题可以通过为父元素添加 height 属性来解决。这个问题的解决很简单，但是却需要我们对 Flexbox 布局的规则有一定的了解。因此，在学习或使用 Flexbox 布局时，我们需要将其作为一项完整的特性进行学习，深入理解其规则和应用场景，才能更好地应用它的特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64929edb48841e9894068eae