在使用 CSS Flexbox 布局的过程中，我们经常需要将子元素进行换行，并希望在换行时子元素能够对齐。但是，有时候会出现子元素在换行时对齐失效的情况，这时候我们就需要采取一些措施来解决这个问题。
问题的重现
首先，让我们来重现这个问题，首先我们创建一个 flex 容器，并设置容器的 flex-wrap 属性为 wrap，这样当容器中的子元素宽度之和大于容器宽度时，子元素会自动换行。
HTML 代码：
<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div>
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ------ ------ ------- ------ ------- ----- ----------------- ----- -
效果如下：
现在，我们希望子元素在换行时能够对齐，因此可以使用 align-content 属性来实现该效果，对齐方式为居中对齐。
CSS 代码：
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
}接下来，我们会发现子元素在第一行和第二行都是居中对齐的，但是在第二行最后一个子元素中，就发生了对齐失效的情况。
解决方案
出现对齐失效的原因是因为 flex 子元素的 margin 值会影响对齐方式，而在换行时，子元素之间的 margin 值会发生变化，因此会导致对齐失效。
因此，我们需要对 margin 值进行特殊处理，将 margin 值加在容器上，而不是加在子元素上。
CSS 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- -------------- ------- ------- ------ - ----- - ------ ------ ------- ------ ------- ----- ----------------- ----- -
这样，我们就可以解决 CSS Flexbox 布局中 flex 子元素换行对齐失效的问题了。
总结
在使用 CSS Flexbox 布局时，我们需要注意子元素的 margin 值对于对齐方式的影响，遇到对齐失效的情况时，可以将 margin 值加在容器上来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6493a2f648841e989414183a