HTML 如何在 flex 布局中换行

在本文中，我们将介绍如何在 flex 布局中实现换行效果，即如何在 flex 容器中将项目在一行中排列时，让部分项目自动换行显示。

阅读更多：HTML 教程

flex 布局简介

Flex 布局是一种基于弹性盒子模型的布局方法，它的目标是为了提供一种灵活的方式来对容器中的项目进行排列、对齐和分配空间。该布局方法常用于响应式设计和移动端开发中。

在 flex 容器中，默认情况下项目会在一行中水平排列，如果容器的宽度不足以容纳所有项目，则会出现溢出或缩小项目的情况。但有时我们希望部分项目能够自动换行显示，以适应容器的宽度变化。

flex-wrap 属性

要实现在 flex 布局中的换行效果，我们可以使用 flex-wrap 属性。该属性用于指定容器内的项目是否允许换行，默认值是 nowrap，即不允许换行。

以下是 flex-wrap 属性的取值及其含义：
– nowrap：不允许换行（默认值）
– wrap：允许换行，项目在所在行的开始位置排列，多行依次从上到下排列
– wrap-reverse：允许换行，项目在所在行的结束位置排列，多行依次从下到上排列

下面是一个简单示例，展示了当 flex 容器宽度无法容纳所有项目时，使用 flex-wrap 属性实现自动换行：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}
</style>

在上面的示例中，容器使用了 flex 布局，并设置了 flex-wrap: wrap。当容器的宽度不足以容纳所有项目时，项目会自动换行显示。

flex-basis 属性

除了使用 flex-wrap 属性实现换行效果外，还可以利用 flex-basis 属性来控制项目的宽度。该属性指定项目在主轴上的初始大小，可以使用具体的长度值（如像素、百分比等）或关键字（如 auto）。

通过设置 flex-basis 属性，我们可以控制部分项目的宽度，在容器宽度不足时使其自动换行。

以下是一个示例，展示了如何使用 flex-basis 属性实现自动换行：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item flex-break">Item 9</div>
  <div class="item flex-break">Item 10</div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}
.flex-break {
  flex-basis: 100%;
}
</style>