在使用 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 是一个 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