解决 CSS Flexbox 换行引起的布局错乱问题

在使用 CSS Flexbox 进行布局时，如果出现了换行现象，可能会导致布局错乱，这时候我们就需要采取一些措施来解决这个问题。

问题背景

在使用 Flexbox 进行布局时，如果所定义的容器宽度不够容纳全部的子元素，容器中的子元素就会发生自动换行。而当子元素跨越多行时，它们的布局可能会出现错乱，导致页面的显示效果不尽如人意。

以下是一个示例代码：

<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;
  width: 400px;
}

.item {
  width: 200px;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

以上代码中，.container 是一个 Flex 容器，子元素 .item 的宽度为 200px，容器宽度设置为 400px，因此其中的子元素将被强制排列在两列中。如果您改变容器的宽度，例如将其缩小到 250px，则所有子元素将自动换行为两行，而且布局错乱，效果如下图所示：

解决方法

为了避免出现上述情况，我们可以使用以下两种方法：

方法一：设置 min-width

由于子元素的宽度被设置为 200px，我们可以通过 min-width 属性将其更改为使用相对宽度 50%。这样，它将始终呈现为容器的一半，而不是遇到换行就换行。

.item {
  min-width: 50%;
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

使用该方法，当容器宽度缩小至 250px 时，元素不会进行换行，而是尽可能的利用容器的空间，布局效果如下图所示：

方法二：设置 flex-basis

另一种解决方法是使用 flex-basis 属性。该属性设置 Flexbox 的子元素在空间分配方面的默认大小。

.item {
  flex-basis: calc(50% - 20px);
  height: 100px;
  margin: 10px;
  border: 1px solid black;
}

使用该方法，当容器宽度缩小至 250px 时，元素会进行自动换行，同时在两行中均匀地分配，布局效果如下图所示：

总结

以上就是解决 CSS Flexbox 换行引起的布局错乱问题的两种方法，希望可以帮助大家更好地使用 Flexbox 进行页面布局。不同的项目可能会需要不同的方法，开发者们需要根据情况选择适合自己的方法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b4dc9fadd4f0e0ffdb7ba6