Flex 布局是一种非常强大的前端布局方式，它可以让我们更加灵活地控制元素在容器中的排列顺序、对齐方式以及间距等。而其中的 flex-wrap 属性则是控制 Flex 容器中的元素换行方式的关键属性。
flex-wrap 属性的作用
在 Flex 布局中，我们可以通过 flex-wrap 属性来控制容器中的元素是否能够换行显示。默认情况下，flex-wrap 属性的值为 nowrap，也就是不允许元素换行，这时候所有的元素都会尽可能地排在一行里面。而当我们将 flex-wrap 属性的值设置为 wrap 时，容器中的元素就可以自动进行换行。
除了 nowrap 和 wrap 之外，flex-wrap 属性还可以取到一个值叫做 wrap-reverse。这个值与 wrap 的效果类似，不同的是它会让元素从容器的底部开始逐行排列，直到排到容器的顶部为止。
flex-wrap 属性的语法
flex-wrap 属性的语法非常简单，只需要在 Flex 容器上添加一个 flex-wrap 属性，并设置它的值即可。例如：
.container {
display: flex;
flex-wrap: wrap;
}在这个例子中，我们将 flex-wrap 属性的值设置为 wrap，这样容器中的元素就可以自动进行换行了。
flex-wrap 属性的示例
接下来，我们来看一些具体的示例，更好地理解 flex-wrap 属性的用法。
示例一：不允许换行
首先，我们来看一下不允许换行的情况。这时候所有的元素都会尽可能地排在一行里面，如果元素的总宽度超过了容器的宽度，那么就会出现溢出的情况。
-- -------------------- ---- ------- ---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ------- ------ ------ ------- --- ----- ----- - ----- - ------ ----- ------- ----- ----------------- ----- ------------- ----- -
这里我们将容器的宽度设置为 300px，而每个元素的宽度为 50px，加上 10px 的 margin-right，那么一行最多只能容纳 5 个元素。如果我们将容器的宽度改成 200px，那么就会出现溢出的情况。
示例二：允许换行
接下来，我们将 flex-wrap 属性的值改成 wrap，这样容器中的元素就可以自动进行换行了。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- ------ ------ ------- --- ----- ----- - ----- - ------ ----- ------- ----- ----------------- ----- ------------- ----- -------------- ----- -
这里我们还添加了一个 margin-bottom 属性，来控制每个元素之间的间距。这样，当元素的总宽度超过容器的宽度时，它们就会自动进行换行，从而避免了溢出的情况。
示例三：反向换行
最后，我们来看一下 flex-wrap 属性的另外一个取值 wrap-reverse。这个值与 wrap 的效果类似，不同的是它会让元素从容器的底部开始逐行排列，直到排到容器的顶部为止。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ------------- ------ ------ ------- --- ----- ----- - ----- - ------ ----- ------- ----- ----------------- ----- ------------- ----- -------------- ----- -
这里我们将 flex-wrap 属性的值设置为 wrap-reverse，这样元素就会从容器的底部开始逐行排列。这个属性的使用场景相对较少，但是在某些情况下还是非常有用的。
总结
flex-wrap 属性是控制 Flex 容器中的元素换行方式的关键属性。通过设置它的值，我们可以灵活地控制元素的排列方式，从而实现不同的布局效果。在实际开发中，我们需要根据具体的需求来选择合适的取值，以达到最佳的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/658a814beb4cecbf2dfb4e23