在CSS弹性盒子布局里，当子元素总宽度超过容器宽度时，默认情况下它们会被压缩在一行内。如果我们希望内容能够自动换行，就需要使用flex-wrap属性来控制flex容器内项目的换行行为。
flex-wrap属性介绍
flex-wrap是Flexbox布局中的核心属性之一，专门用来定义弹性项目是否换行。它应用在flex容器上，而不是子项上。
常用属性值
- nowrap：默认值，不换行，所有子项排在一行。
- wrap：换行，子项从左上到右排列，超出容器宽度时自动换到下一行。
- wrap-reverse：反向换行，从下往上换行排列。
基础代码示例
下面是一个简单的HTML与CSS示例，展示如何使用flex-wrap让内容自动换行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
width: 300px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background: #69c;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
结合flex-direction使用
flex-wrap还可以和flex-direction配合，决定主轴方向和换行方向。例如设置flex-direction: row加flex-wrap: wrap就是常见的横向自动换行布局。
反向换行示例
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse; /* 从底部开始换行 */
}
实际开发建议
在响应式页面中，推荐对导航、标签墙、图片列表使用flex-wrap: wrap，这样在窄屏时会自然换行，无需写复杂媒体查询。同时要注意子项不要设置固定不缩放的宽度导致溢出，可配合flex: 1 1 auto使用。
flex-wrap只作用于flex容器，若display不是flex或inline-flex则无效。
小结
通过flex-wrap属性，开发者可以用极少量代码实现内容自动换行。掌握nowrap、wrap与wrap-reverse的差异，便能灵活应对各种CSS布局中的换行需求。