flex-wrap用于控制flex容器子元素换行，取值为nowrap（默认不换行）、wrap（换行）和wrap-reverse（反向换行）。示例中通过设置flex-wrap: wrap实现响应式卡片布局，配合gap调整间距，结合flex-direction可创建垂直多列布局，适用于导航菜单、图片网格等场景。
在使用 CSS Flexbox 布局时，flex-wrap 属性用于控制 flex 容器中的子元素是否换行以及如何换行。默认情况下，flex 项目会尝试在一行内显示，超出容器也不会自动换行。通过设置 flex-wrap，可以让项目在空间不足时自动换到下一行，实现更灵活的布局效果。
flex-wrap 的可选值
flex-wrap 支持三个主要取值：
- nowrap：默认值，所有项目保持在一行（或一列），不换行。
- wrap：允许项目在必要时换行，第二行在第一行下方。
- wrap-reverse：换行方向反转，新行出现在上方（如果是水平布局）。
基本用法示例
假设你想创建一个响应式的卡片布局，每张卡片宽度固定，当容器空间不足时自动换行：
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 10px; /* 设置项目之间的间距 */
}
.card {
flex: 0 0 200px; / 固定每张卡片宽200px，不伸缩 /
height: 150px;
background-color: #007bff;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
在这个例子中，.container 使用 flex-wrap: wrap，确保当卡片加起来超过容器宽度时，自动换到下一行。配合 gap 可以让布局更美观。
立即学习“前端免费学习笔记（深入）”；
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
结合 flex-direction 控制换行方向
你可以将 flex-wrap 和 flex-direction 结合使用，比如实现垂直方向的多列布局：
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px; /* 必须设置高度才能触发垂直换行 */
}
.item {
flex: 0 0 80px;
width: 100px;
}
此时项目按列排列，当容器高度不够时，内容会向右“换列”显示。
常见应用场景
- 响应式导航菜单：小屏幕下菜单项自动换行。
- 图片或商品网格：无需使用 Grid 或浮动，也能实现自适应排列。
- 表单控件布局：多个输入框在窄屏中自然换行。
基本上就这些，只要记得开启 flex-wrap: wrap 并合理设置子项尺寸和容器空间，就能轻松实现自动换行布局。不复杂但容易忽略。
