Flex布局中justify-content控制主轴（默认水平）对齐，align-items控制交叉轴（默认垂直）对齐；二者配合可实现导航栏水平居中、垂直居中或三段式分布，需设display:flex及合适高度。
为什么用 display: flex 而不是 float 或 inline-block
因为 float 需要清浮动、易塌陷，inline-block 有看不见的空白间隙且垂直对齐麻烦；display: flex 天然支持主轴对齐、自动等分、响应式收缩，浏览器兼容性已覆盖所有现代主流版本（Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+），无需 hack。
justify-content 和 align-items 怎么选才不翻车
头部导航栏通常需要水平居中或靠右对齐 logo + 左侧菜单 + 右侧按钮，这时主轴是水平方向（flex-direction: row 默认值），所以：
-
justify-content控制菜单项在行内的水平分布：space-between适合 logo 左 + 导航居中 + 登录按钮右；flex-end适合纯右对齐场景 -
align-items: center必须加——否则文字和图标会默认基线对齐，出现上下错位 - 别漏掉
flex-wrap: nowrap（默认值，但显式声明更稳妥），避免小屏下意外换行
响应式折叠时，flex 容器怎么避免宽度计算错误
移动端点击 hamburger 展开菜单时，如果直接用 display: none 切换子元素，Flex 会重新计算剩余项的伸缩比例，导致布局跳动。正确做法是：
- 用
visibility: hidden+opacity: 0隐藏折叠项，保留其在 Flex 布局中的占位 - 或者把折叠内容单独包一层
<nav class="mobile-menu">，让它脱离主flex流，用position: absolute覆盖 - 避免给
flex-item设固定width，改用flex: 0 0 auto（不放大不缩小，按内容宽）或flex: 1 1 0（均分剩余空间）
性能陷阱：过度嵌套 flex 容器和重排风险
常见错误是给每个 <li> 或 <a> 都加 display: flex，实际没必要。真正需要 Flex 的只有顶层容器（<header> 或 <nav>）：
立即学习“前端免费学习笔记（深入）”；
- 导航项内部用
padding+line-height对齐就够了，不需要 Flex - 图标按钮用
display: inline-flex即可，避免触发整行重排 - 慎用
flex: 1在非容器级元素上——它会让浏览器反复测量宽度，尤其在动画中易卡顿
复杂点在于：当导航项含徽标、搜索框、用户头像等不同宽度组件时，flex-grow 的隐式行为容易被忽略；建议始终显式写全三值，比如 flex: 0 1 200px，而不是只写 flex: 1。
