flex-wrap: wrap 是两行导航的起点，因为默认 display: flex 会强制子项单行排列、溢出也不换行；必须显式启用该属性才能触发自动换行逻辑，否则后续所有布局设置均无效。
为什么 flex-wrap: wrap 是两行导航的起点
默认 display: flex 会把所有子项强行压在一行，超出容器就溢出或横向滚动。要让它“自动折成两行”，必须显式启用换行能力：flex-wrap: wrap。不加这句，后面所有对齐、间距、均分的设置都白搭。
常见错误现象：导航项在桌面端看着正常，一缩浏览器宽度就消失或横向拖动——根本没触发换行，只是被裁剪了。
-
flex-wrap: wrap后，子项会按容器宽度自动换行，但不会强制“刚好两行”；实际行数取决于内容宽度和容器尺寸 - 若想稳住为两行（比如固定 8 个项，每行 4 个），得配合
flex: 0 0 calc(25% - gap/2)或用grid更可控 - IE11 支持
flex-wrap，但不支持gap，需退回到margin-right+:last-child清除
justify-content 和 align-content 别混用
justify-content 控制**单行内**子项的水平分布（如 space-between、center）；而两行及以上时，真正决定“行与行之间怎么排”的是 align-content——它管的是**多行容器的垂直对齐方式**。
容易踩的坑：只设了 justify-content: center，发现两行上下贴边、中间空一大片，却死活调不匀——其实是 align-content 默认是 stretch，但容器没设高度，它就无效；换成 align-content: space-around 才能均匀拉开行间距。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
align-content: flex-start→ 两行都挤在顶部 -
align-content: center→ 两行整体居中（上下留白相等） -
align-content: space-between→ 首尾行贴上下边缘，中间留空 - 若容器高度固定（如
min-height: 60px），align-content: stretch才会让两行等高撑满
用 grid 实现严格两行比 flex 更可靠
当设计稿明确要求“8 个导航项，必须整齐排成 2×4 网格”，flex 的自动换行就不可控：字体缩放、中英文混排、不同浏览器度量差异，都可能导致某行 3 个、某行 5 个。这时直接上 display: grid 更省心。
示例（4 列 × 2 行）：
.nav-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
- 不用管子元素顺序或数量，
repeat(4, 1fr)强制分 4 列，多余项自动进第二行 - 加
grid-auto-rows: minmax(44px, auto)可约束每行最小高度，适配触控 - 移动端想变单列？直接媒体查询：
@media (max-width: 768px) { .nav-grid { grid-template-columns: 1fr; } } - 注意：IE11 不支持
grid，若必须兼容，只能回退到flex+ JS 动态分组或服务端渲染固定结构
当前页高亮在两行布局里容易失效
两行导航常伴随“主类目+子类目”分层，比如第一行是首页/产品/方案，第二行是产品A/产品B/产品C。此时高亮逻辑不能只看 href 是否包含当前路径——/products/a 匹配 /products 会误亮第一行，也可能漏掉第二行。
真实场景下，高亮判断得带层级语义：
- 第一行项用
data-nav-level="1"标记，第二行用data-nav-level="2" - JS 匹配时先找 level=2 的精确路径匹配，没命中再 fallback 到 level=1 的前缀匹配
- 别依赖
location.pathname.startsWith(item.href)——/about会错配/about-us，得加结尾斜杠判断或正则锚定 - CSS 中用
[aria-current="page"]而非.active，更语义，也方便读屏器识别
两行导航真正的复杂点不在布局本身，而在响应式断点与语义高亮的耦合：视觉上折成两行后，键盘焦点流是否仍线性可 Tab？屏幕阅读器能否区分“主类目行”和“子类目行”？这些没法靠 CSS 单独解决，必须 HTML 结构、CSS 布局、JS 状态三者对齐。
