CSS Flexbox 是一种强大且灵活的布局方式。其中，flex-wrap 属性允许控制 flex 容器内 flex 元素的换行及排列方式，是实现响应式布局的关键之一。在本文中，我们将深入探讨 flex-wrap 的作用、语法规则、使用案例以及其它注意点，帮助读者更深入理解 Flexbox 布局的实践工作。
flex-wrap 的作用
当 flex 容器的宽度小于所有 flex 元素的组合宽度时，我们就需要使用 flex-wrap 属性来控制 flex 元素是否换行，以便适应不同分辨率、屏幕尺寸或者设备类型下的布局需求。
flex-wrap 的语法规则
flex-wrap 属性有 3 种取值：
- nowrap：默认值，强制所有的 flex 元素都在一行上排列，会压缩元素的宽度。
- wrap：将 flex 元素按照一定规则换行，以适应 flex 容器的宽度。
- wrap-reverse：将 flex 元素反向排列，第一排放置在下方，第二排放置在上方，以此类推。
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}flex-wrap 的使用案例
假设我们有一个 flex 容器，其中有 4 个 flex 元素。当我们将容器宽度缩小到 300px 左右时，flex 元素们的宽度相继被压缩，从而影响了界面的可读性。
为了解决这个问题，我们可以将 flex-wrap 属性设置为 wrap，让 flex 元素自动换行。
.box {
display: flex;
flex-wrap: wrap;
}在上方代码中，我们使用了 display 和 flex-wrap 两个属性，实现了将 4 个 flex 元素自动排列在一行或多行的效果。
除了上述示例，flex-wrap 还有许多不同的应用场景。例如，当我们实现一个响应式布局时，通过将 flex-wrap 设置为 wrap，可以让 flex 元素在不同屏幕尺寸下自动换行，以便使界面更加美观、易读。
当然，我们还可以在特殊情况下使用 默认的 nowrap 取值。它可以在父级元素宽度不够时，将子元素强制压缩在一行上排列，实现自动水平滚动条的效果。
.box {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}上述示例中，当 flex 容器的宽度不能满足所有子元素的宽度和时，我们使用 nowrap 取值，并在容器上设置 overflow-x 属性，实现自动水平滚动条的效果。
其它注意点
- flex-wrap 属性只对 flex 容器内具有 BFC 特性的 flex 元素生效，因此必须在元素的 display 属性中设置为 flex 或 inline-flex 才能生效。
- 内联元素也支持 flex-wrap 属性，不过它只会在纵向空间不够时才会换行，而不是在水平空间不够时。
- 如果使用了横向布局的 flex 容器，可以使用 flex-flow 属性代替 flex-wrap 和 flex-direction，以便更简单地对 flex 元素进行布局。
总结
在本文中，我们探讨了 CSS Flexbox 布局中的 flex-wrap 属性，包括其作用、语法规则、使用案例以及其它注意点等。在实际开发中，仔细掌握 flex-wrap 以及其它 Flexbox 属性的使用方法，可以让我们更加高效地开发出具备良好响应式布局的页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450f477980a9b385b9d04c0