CSS 如何使换行的 flex 项目保持与上一行元素相同的宽度

在本文中，我们将介绍如何使用 CSS 来使换行的 flex 项目保持与上一行元素相同的宽度。

阅读更多：CSS 教程

问题背景

在使用 flexbox 布局时，当 flex 容器的宽度无法容纳所有 flex 项目时，会发生换行。这种情况下，默认情况下，换行后的 flex 项目会根据容器的宽度重新计算它们的宽度。

然而，有时候我们希望换行的 flex 项目保持与上一行元素相同的宽度。这在一些特定的设计场景下是非常有用的，比如创建一个网格布局或者平均分配每一行的空间。

解决方案

要使换行的 flex 项目保持与上一行元素相同的宽度，我们可以使用 flex-wrap 和 flex-basis 属性的组合。

首先，我们需要将 flex 容器的 flex-wrap 属性设置为 wrap，以允许 flex 项目换行显示。

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

然后，我们将所有的 flex 项目的 flex-basis 属性设置为相同的值，这样它们就会保持相同的宽度。通常，我们使用百分比或者像素值来设置 flex-basis。

.flex-item {
  flex-basis: 25%;
}

上述示例代码中，我们将每个 flex 项目的宽度设置为容器宽度的四分之一，以实现平均分配每一行的空间。

示例

下面是一个使用以上解决方案的示例：

<div class="flex-container">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
  <div class="flex-item">Flex Item 4</div>
  <div class="flex-item">Flex Item 5</div>
  <div class="flex-item">Flex Item 6</div>
</div>

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

.flex-item {
  flex-basis: 25%;
}

在上述示例中，当 flex 容器宽度不足以容纳所有 flex 项目时，它们将会换行，并保持与上一行元素相同的宽度。

总结

通过将 flex 容器的 flex-wrap 属性设置为 wrap，并使用相同值的 flex-basis 属性，我们可以使换行的 flex 项目保持与上一行元素相同的宽度。这样的布局有助于创建网格布局或者实现平均分配每一行的空间。

在实际应用中，根据实际需求，我们可以根据项目的数量和容器的宽度来调整 flex-basis 的值，以达到最佳的视觉效果。