本文详解如何通过添加 flex-wrap: wrap 解决 flex 布局中子元素不换行的问题，使长列表在小屏幕上自动折行显示，并给出完整 css 修正、注意事项及响应式增强建议。

本文详解如何通过添加 flex-wrap: wrap 解决 flex 布局中子元素不换行的问题，使长列表在小屏幕上自动折行显示，并给出完整 css 修正、注意事项及响应式增强建议。

默认情况下，Flex 容器（display: flex）的子项会沿主轴（此处为 row）单行排列，即使超出容器宽度也不会自动换行——这正是问题中蓝色词块列表（#phrase > div）无法随屏幕尺寸自适应折行的根本原因。

✅ 正确解决方案：启用 Flex 换行

只需在 #phrase 的 CSS 中添加 flex-wrap: wrap，即可允许子元素在空间不足时自动换行到下一行：

#phrase {
  color: #fff;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* ? 关键声明：启用换行 */
  margin: 2rem 0;
}

? 补充说明：flex-wrap 有三个常用值：

• nowrap（默认）：所有项目强制单行；
• wrap：换行，新行在主轴方向（如 row 时向下）；
• wrap-reverse：换行但新行反向堆叠（如 row 时向上）。

?️ 进阶优化建议（提升响应式体验）

仅加 flex-wrap 可能导致小屏下单个子项过宽、换行后布局松散。推荐配合以下调整：

1. 限制子项最大宽度，促进合理换行
   在 #phrase > div 规则中添加 flex-basis 或 max-width，避免固定 min-width: 100px 在窄屏下撑满整行：

   #phrase > div {
     margin: 0 10px 10px;
     padding: 5px 10px;
     background: #007bff;
     border: 2px solid #007bff;
     border-radius: 6px;
     color: #fff;
     flex: 1 1 auto; /* 允许缩放 */
     min-width: 80px; /* 适度减小最小宽度 */
     max-width: 140px; /* 防止过大 */
   }

2. 添加响应式断点（可选）
   对于极端小屏（如手机），可进一步控制每行显示数量：

   @media (max-width: 768px) {
     #phrase > div {
       flex: 1 1 calc(50% - 10px); /* 每行最多2个 */
     }
   }
   
   @media (max-width: 480px) {
     #phrase > div {
       flex: 1 1 100%; /* 每行仅1个 */
       margin: 0 0 10px;
     }
   }

3. 确保父容器宽度可控
   检查 #phrase 的父级是否设置了 width: 100% 或 max-width，避免因父容器过宽导致换行失效（例如未清除浮动、或存在 white-space: nowrap 继承）。

⚠️ 注意事项

• 勿遗漏 display: flex：flex-wrap 仅对 Flex 容器生效，若误设为 inline-flex 或遗漏 display 声明将无效。
• 避免 white-space: nowrap 冲突：检查 #phrase 或其子元素是否意外继承了禁止换行的文本样式。
• jQuery UI 拖拽兼容性：当前拖拽逻辑（.prependTo(this)）在换行后仍能正常工作，但需注意：视觉上换行后的 DOM 顺序与渲染顺序一致，无需额外调整 JS。
• 空占位符样式：#phrase > div:empty 的虚线边框在换行后可能产生不规则间距，建议统一使用 margin-bottom 控制垂直间隙，而非依赖 :empty 的 min-height。

✅ 总结

flex-wrap: wrap 是解决 Flex 子项响应式折行的核心属性。结合 flex: 1 1 auto、合理设置 min/max-width 及媒体查询，即可实现从桌面到移动端的平滑自适应布局。无需修改 HTML 结构或 JavaScript 逻辑，纯 CSS 层面即可完成升级。