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，使元素在交叉轴上居中对齐。
下面是示例代码：
// javascriptcn.com 代码示例 <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>
// javascriptcn.com 代码示例
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}在上面的代码中，我们将容器的宽度设置为 960px，每个子元素的宽度为 100px，加上 margin 的宽度为 120px。因此，当容器宽度小于 840px 时，子元素就会自动换行。
总结
在 CSS Flexbox 中实现换行后的整体水平居中，可以使用 justify-content 和 align-items 两个属性来控制元素的对齐方式。通过这种方式，我们可以轻松实现各种复杂的布局需求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656f2c46d2f5e1655d78171b