flex-direction: row 是水平导航默认方向，需确保父容器有足够宽度且未被 flex-direction: column 覆盖；justify-content 控制主轴间距，常用 space-between、space-around 和 flex-start + margin-right: auto；响应式中 flex-wrap 与 flex-basis 协同控制换行。
flex-direction: row 是水平导航的默认前提
很多新手写完 display: flex 却发现菜单项堆成一列，根本没横向排开——问题往往出在父容器没设宽，或被其他样式（比如 flex-direction: column）覆盖。Flex 默认主轴是水平方向，但前提是容器本身有足够宽度且未被强制换向。
实操建议：
- 确认
.nav-list的父元素（如.navbar）没有设置width: 0或overflow: hidden类似限制 - 避免在导航容器上误加
flex-direction: column；如需竖向菜单（比如侧边栏），才显式声明 - 移动端小屏下若想保持横排，需配合
white-space: nowrap和overflow-x: auto实现可滚动导航，而非直接换行
justify-content 控制菜单项间距的三种典型用法
justify-content 决定菜单项在主轴（水平）上的分布方式，选错会导致两端留白过大、文字挤在一起，或点击热区不均。
常见场景与取值建议：
-
justify-content: space-between：首尾两项贴边，中间等距——适合固定数量菜单（如 4–5 项），但最后一项右边无边距，需额外加padding-right -
justify-content: space-around：每项两侧留等量空白——更均衡，但总宽度会略大于容器，可能触发轻微换行（尤其在窄屏+字体放大时） -
justify-content: flex-start+margin-right: auto在 logo 后：适合带品牌 Logo 的左对齐导航，右侧放登录/搜索等操作项
响应式断点中 flex-wrap 和 flex-basis 的协同逻辑
纯 flex: 1 在小屏下会让每个菜单项强行撑满一行，文字换行难看；而直接设 flex-wrap: wrap 又可能让二级菜单意外折行。关键在控制“何时该换”和“换多少”。
推荐组合：
- 桌面端：不设
flex-wrap，用flex: 0 1 auto让菜单项按内容宽度自然伸缩 - 平板（~768px）：启用
flex-wrap: wrap，同时给.nav-item设flex-basis: 25%（4项）或flex-basis: 33.333%（3项），避免单个项过宽 - 手机（.nav-list，不再依赖 Flex 换行逻辑
align-items: center 失效的三个真实原因
明明写了 align-items: center，但文字就是不垂直居中——这不是 Flex 失灵，而是高度计算链断了。
高频原因：
-
.nav-list没设明确高度（如height: 60px），导致侧轴参考系缺失；Flex 容器需有确定的交叉轴尺寸才能居中 - 子项（
.nav-item）内含a标签，但a默认是 inline 元素，其line-height未匹配容器高度，需加display: block或inline-flex - 字体渲染差异：某些系统（如 macOS Safari）对
font-size和line-height的解析偏移 1px，建议统一设line-height: 1.2并配合vertical-align: middle
最易被忽略的一点：Flex 导航栏的“自适应”不只靠媒体查询，它本质依赖于容器尺寸、子项内容长度、字体度量三者的动态博弈。写死 width 或过度依赖 flex: 1 反而破坏弹性——留出一点“不确定”，才是 Flex 真正起效的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
