CSS Flexbox 是一种强大的布局方式，可以轻松实现各种布局需求。但是，在实现换行布局时，很多人会遇到一个问题：如何让换行后的元素整体水平居中？本文将详细介绍如何利用 CSS Flexbox 实现这个需求。
什么是 CSS Flexbox？
CSS Flexbox 是 CSS3 中的一种布局模式，它可以让我们更加方便地实现各种布局需求。Flexbox 的特点是可以将容器中的元素按照一定的规则进行排列，从而实现各种复杂的布局效果。
如何实现换行后的整体水平居中？
在 CSS Flexbox 中，我们可以使用 justify-content 属性来控制元素在主轴上的对齐方式。默认情况下，元素是沿着主轴从左到右排列的。如果元素换行了，那么在下一行的元素就会从左侧开始排列，这样就无法实现整体水平居中的效果。
为了解决这个问题，我们可以使用 align-items 属性来控制元素在交叉轴上的对齐方式。默认情况下，元素是沿着交叉轴从上到下排列的。如果我们将 align-items 设置为 center，那么元素就会在交叉轴上居中对齐。
接下来，我们就可以利用这两个属性来实现换行后的整体水平居中了。具体的实现步骤如下：
- 将容器的
display属性设置为flex，开启 Flexbox 布局模式。 - 将容器的
flex-wrap属性设置为wrap，使元素在超出容器宽度时自动换行。 - 将容器的
justify-content属性设置为center，使元素在主轴上居中对齐。 - 将容器的
align-items属性设置为center，使元素在交叉轴上居中对齐。
下面是示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ----- ------- ----- -
在上面的代码中，我们将容器的宽度设置为 960px，每个子元素的宽度为 100px，加上 margin 的宽度为 120px。因此，当容器宽度小于 840px 时，子元素就会自动换行。
总结
在 CSS Flexbox 中实现换行后的整体水平居中，可以使用 justify-content 和 align-items 两个属性来控制元素的对齐方式。通过这种方式，我们可以轻松实现各种复杂的布局需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656f2c46d2f5e1655d78171b