CSS 当flex项目换行时，均匀分布

在本文中，我们将介绍当使用flex布局的容器中的项目换行时，如何实现均匀分布的效果。

阅读更多：CSS 教程

flex布局简介

flex布局（也称为弹性布局）是一种方便且灵活的布局方式，可以轻松实现对容器中的项目进行排列和对齐。使用flex布局时，需要在容器上设置display: flex属性。

均匀分布项目

当容器中的项目超出容器宽度，并换行显示时，我们希望每行的项目能够均匀分布，而不是默认的左对齐。

要实现这个效果，我们可以使用justify-content属性。该属性定义项目在主轴上的对齐方式，对于水平方向的布局来说，主轴是x轴（横向），对于垂直方向的布局来说，主轴是y轴（纵向）。

示例代码如下：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

在上述代码中，flex-wrap: wrap设置了项目换行，justify-content: space-between将项目在主轴上均匀分布。

示例说明

假设我们有一个容器，容器的宽度是400px，有6个项目，每个项目的宽度是80px。如果不设置均匀分布，项目将会在一行显示，超出容器的宽度。

<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>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 80px;
  height: 80px;
  background-color: lightblue;
  margin-bottom: 10px;
}

以上代码中，项目会在一行显示，并且最后一个项目超出了容器的宽度。

如果我们将容器的justify-content属性设置为space-between，则项目将会均匀分布在每一行上。这样，项目在换行时也能够保持均匀分布的效果。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

总结

使用flex布局时，当项目换行时，我们可以使用justify-content属性来实现项目的均匀分布。通过设置justify-content: space-between，可以让项目在主轴上均匀分布，从而实现项目在换行时的均匀分布效果。