flex-wrap: nowrap 强制单行显示，可能溢出；wrap 允许按主轴空间自动折行。nowrap 适合水平滚动场景，wrap 用于响应式布局如导航栏、卡片栅格。

flex-wrap: wrap 与 nowrap 的实际行为差异

默认情况下，flex-wrap 值为 nowrap，意味着所有 flex 项目会强行挤在**单一行内**，哪怕内容溢出容器也不换行——这常导致横向滚动条或内容被裁剪，而非你预期的“自动折行”。而设为 wrap 后，只要主轴空间不足，项目就会按顺序折到下一行（或下一列），形成多行布局。

• nowrap：忽略容器宽度限制，项目宽度总和可能 > 容器宽度；overflow: hidden 可能隐藏溢出内容，但不会改变布局结构
• wrap：每行尽可能填满主轴可用空间，新行从交叉轴起点（如 flex-direction: row 时是上方）开始排列
• 注意：wrap-reverse 不是“反向换行”，而是**第一行出现在交叉轴末端**（例如 row 下第一行在底部），实际使用较少，易误判

什么时候必须用 wrap？哪些场景下 nowrap 更合理？

用 wrap 的典型场景是响应式导航栏、标签云、响应式卡片栅格——当屏幕变窄、项目无法并排显示时，需要自然折行保持可读性。而 nowrap 更适合明确禁止折行的 UI 控件，比如水平滚动的时间轴、固定宽度工具栏、或配合 overflow-x: auto 实现横向滑动区域。

• 移动端小屏下 flex-wrap: nowrap + overflow-x: auto 是常见组合，避免意外折行破坏水平布局语义
• 若父容器设置了 width: fit-content 或 display: inline-flex，nowrap 可能导致容器自身撑宽，需留意文档流影响
• wrap 后若想控制“行间距”，不能靠 margin-bottom（因为项目不在同一行），得用 align-content 或给每行包一层 wrapper

容易被忽略的兼容性与副作用

flex-wrap 在所有现代浏览器中支持良好（包括 iOS Safari 9+、Android Browser 4.4+），但老版本微信内置浏览器（X5 内核 v3.x）曾存在 wrap-reverse 渲染异常问题，不过 wrap/nowrap 基本无风险。

• 设为 wrap 后，justify-content 仅作用于**每一行内部**，不是整个容器；多行时若要整体垂直居中，得靠 align-content，不是 align-items
• align-items: stretch 在 wrap 多行下仍只拉伸单行内的项目高度，不会跨行拉齐——如果希望多行项目等高，需额外用 align-content: stretch 或 JS 计算
• 使用 flex-flow: row wrap 简写时，务必确认没意外覆盖掉已设置的 flex-direction，尤其在 CSS 预处理器或多人协作项目中

.nav-bar {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center; /* 每行居中 */
  align-content: flex-start; /* 多行时顶部对齐，避免空隙下沉 */
}
.nav-item {
  flex: 0 0 auto; /* 不放大不缩小，宽度由内容决定 */
  margin: 0 8px;
}

真正麻烦的从来不是“要不要换行”，而是换行后交叉轴对齐逻辑突然变了——align-items 管一行，align-content 管多行，这个分界点，很多人调半天才发现没配对。