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 管多行，这个分界点，很多人调半天才发现没配对。
立即学习“前端免费学习笔记（深入）”；
