flex-wrap: wrap 是让 flex 容器内子项换行的直接解法，需配合 display: flex 使用，通过控制父容器的 flex-wrap 属性实现自动折行，常见于响应式导航栏布局。
flex-wrap: wrap 是让列表项换行的直接解法
小屏幕下 ul 或 ol 的 li 默认是块级元素，但若你把它们设为 display: flex 的子项（比如给父容器加 display: flex），它们就会默认单行排列，超出就溢出或压缩——这时候必须显式启用换行。
关键不是改 li，而是控制父容器的 flex-wrap 属性：
-
flex-wrap: nowrap（默认）→ 死也不换行 -
flex-wrap: wrap→ 容器宽度不够时，自动折到下一行 -
flex-wrap: wrap-reverse→ 换行但方向倒过来（新行在上面）
别忘了给父容器设 display: flex
只写 flex-wrap: wrap 没用——它只对 display: flex 或 display: inline-flex 的容器生效。常见错误就是只加了 flex-wrap，却漏了 display。
典型结构：
立即学习“前端免费学习笔记（深入）”；
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
li {
flex: 0 0 auto; / 防止被压缩，保持内容自然宽 /
margin-right: 1rem;
}
注意：flex: 0 0 auto 比 flex: 1 更安全，后者会让所有 li 均分空间，小屏下反而挤成窄条。
响应式场景下，用媒体查询控制断点
你通常不希望在桌面端也换行。用 @media 在小屏触发 flex-wrap：
@media (max-width: 768px) {
.nav-list {
display: flex;
flex-wrap: wrap;
}
.nav-list li {
flex: 0 0 100%; /* 小屏下单列占满 */
}
}这里 flex: 0 0 100% 表示“不放大、不缩小、基础宽度为 100%”，确保每项独占一行。如果想两列，就改成 50%（注意留好 margin/gap 空间）。
容易踩的坑：
- 没重置
margin或padding，导致换行后上下间距异常 - 用了
gap但忘了 IE 不支持，需搭配margin回退 - 父容器有固定高度，
flex-wrap换行后内容被裁剪（检查height和overflow）
替代方案：grid 更可控，但兼容性略低
如果目标浏览器支持（Chrome 66+/Firefox 63+/Safari 12.1+），display: grid 配合 auto-fit + minmax() 能更智能地换行：
.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)))));
gap: 0.5rem;
}这比 flex 更少操心单个 li 的 flex 值，且天然支持等宽自适应。但老版本 Safari 或 IE 完全不认，上线前务必核对项目要求的最低支持版本。
flex-wrap 换行看着简单，实际卡点常在父容器的 display 缺失、子项的 flex 缩放失控、以及响应式断点和 gap 的协同处理上——这些地方一动，整排布局就容易错位或塌陷。
