CSS Flexbox：能在多行上平均分配项目吗

在本文中，我们将介绍CSS中的弹性盒（Flexbox）布局，并探讨其是否能够在多行上平均分配项目。

阅读更多：CSS 教程

什么是Flexbox布局？

CSS中的Flexbox是一种用于创建灵活的、自适应的布局的模型。它使我们能够以简单而有效的方式对容器中的项目进行布局，而不需要依赖传统的基于块和浮动的布局技术。

Flexbox布局由两个主要的组成部分组成：容器和项目。容器是我们要进行布局的父元素，而项目则是容器内的直接子元素。通过在容器中定义一些基本的CSS属性和值，我们可以轻松地实现弹性盒布局。

弹性盒子属性

要实现弹性盒布局，我们需要了解一些常用的弹性盒属性。

容器属性

display: 设置容器为弹性盒，值为flex，可选的值还有inline-flex。
flex-direction: 设置主轴的方向，值可以是row（默认值，水平方向），row-reverse（水平方向，但顺序相反），column（垂直方向）或column-reverse（垂直方向，但顺序相反）。
flex-wrap: 控制项目是否可以换行，值可以是nowrap（不换行），wrap（换行），wrap-reverse（反向换行）。
justify-content: 设置主轴上项目的对齐方式，值可以是flex-start（默认值，向主轴开始位置对齐），flex-end（向主轴结束位置对齐），center（在主轴中心对齐），space-between（平均分布在主轴上），space-around（平均分布在主轴上，两侧留有空间）。
align-items: 设置侧轴上项目的对齐方式，值可以是flex-start（向侧轴开始位置对齐），flex-end（向侧轴结束位置对齐），center（在侧轴中心对齐），baseline（对齐项目的基线），stretch（拉伸以填满容器）。
align-content: 当有多行时设置多行的对齐方式，值可以是flex-start（向侧轴开始位置对齐），flex-end（向侧轴结束位置对齐），center（在侧轴中心对齐），space-between（平均分布在侧轴上），space-around（平均分布在侧轴上，两侧留有空间），stretch（拉伸以填满容器）。

项目属性

flex-grow: 定义项目的放大比例，默认值为0，即不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。
flex-shrink: 定义项目的缩小比例，默认值为1。如果空间不足，项目将根据它们的缩小比例减小。如果所有项目的flex-shrink属性都为1，则它们将等比例缩小。
flex-basis: 定义项目在主轴上的初始大小。默认值为auto，项目将根据其内容的大小自动占据空间。
flex: 是flex-grow、flex-shrink和flex-basis属性的一个简写方式。默认值为0 1 auto。
align-self: 用于单个项目，可以覆盖容器的align-items属性。值可以是auto（继承父元素的align-items值）或与align-items相同的其他值。

在多行上平均分配项目

Flexbox布局非常适合在多行上平均分配项目。通过使用适当的属性和值，我们可以轻松地实现这一目标。

首先，我们需要设置容器的flex-wrap属性为wrap，以便在达到容器宽度限制时项目可以自动换行。然后，我们可以使用justify-content属性来在主轴上平均分配项目。将其设置为space-between，项目将均匀分布在每一行上，并与容器的开始和结束位置对齐。

下面是一个示例代码：

<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;
  justify-content: space-between;
}

.item {
  width: 30%;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
}

在上面的示例中，我们创建了一个名为container的容器，并将其设置为弹性盒。通过设置容器的flex-wrap属性为wrap，容器可以在达到限制宽度时自动换行。然后，我们设置justify-content属性为space-between，这使得项目在每一行上等距分布，并与容器的开始和结束位置对齐。