Flex 容器中的新行 - CSS

在 flexbox 布局中，我们可以通过设置 flex 容器的属性来控制项目在主轴上的排列方式，包括项目的对齐方式、排列顺序、尺寸等等。但有些情况下，我们希望能够让项目在次轴（即交叉轴）上自动换行，这时我们就需要使用 flex-wrap 属性。

flex-wrap 属性

flex-wrap 属性指定了 flex 容器内项目的换行规则。它有以下几种取值：

• nowrap：默认值，不换行。
• wrap：让项目在新行上换行。
• wrap-reverse：与 wrap 相似，但是新行在反向容器中。

.container {
  /* 默认不换行 */
  flex-wrap: nowrap; 
}

在每个项目之间添加空隙

如果我们希望让每个项目在次轴方向上有一定的间隔，可以使用 gap 属性。该属性设置了项目之间的距离。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

确定项目在新行上的位置

当项目在新行中时，它们的位置可能需要进行调整。可以使用 align-content 属性来控制项目在交叉轴上的对齐方式。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

示例

以下代码展示了如何将项目分布在三行中：

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-content: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: tomato;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

效果如下：

以上就是关于 flex 容器中的新行的介绍。通过 flexbox 布局，我们可以轻松地控制项目在主轴和交叉轴上的排列方式和尺寸，使得页面布局更加灵活和适应性强。