display: flex 比 float 更可靠，因 float 脱离文档流致父容器塌陷，需清浮动；flex 是布局上下文，子项默认不换行、主轴排列，无需 hack，且 IE10+ 兼容良好。
导航栏用 display: flex 为什么比 float 更可靠
因为 float 会脱离文档流，导致父容器高度塌陷，必须额外清浮动；而 flex 是布局上下文本身，子项默认不换行、自动沿主轴排列，无需 hack。现代项目中，只要支持 IE10+（flex 基础属性兼容良好），就该优先用 flex。
nav 容器的必要 flex 设置
只写 display: flex 不够，常见遗漏点包括：
-
justify-content: space-between或space-around控制项间距，避免手动加margin -
align-items: center垂直居中文字和图标，否则链接可能上下错位 - 给
nav设height或line-height时，要确认子项a没有默认vertical-align: baseline干扰对齐 - 若需响应式折叠，先确保主轴方向是
row（默认值），别误设flex-direction: column
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
background: #333;
}
nav a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
a 标签在 flex 中的常见表现问题
直接把 a 当 flex item 用没问题，但要注意：
-
a默认是 inline 元素，在 flex 容器中会自动变成flex-item，但若内部有img或span，可能因基线对齐导致高低不一 - 点击区域小？给
a加display: block或inline-block并设padding，别只靠line-height - hover 效果失效？检查是否被父级
overflow: hidden截断，或a的z-index被其他层覆盖 - 移动端点击延迟？那是浏览器默认行为，和 flex 无关，需加
touch-action: manipulation
水平等宽导航项的两种稳妥写法
要让每个菜单项宽度均分，不能只靠 flex: 1 —— 它会让内容撑开，文字长短不同会导致宽度不一致。真正可控的是：
立即学习“前端免费学习笔记（深入）”；
- 方案一：所有
a设flex: 1+text-align: center，适合文字长度接近的场景 - 方案二：用
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），强制从零开始均分剩余空间，文字再长也不会挤占别人位置
nav a {
flex: 1 1 0;
text-align: center;
padding: 0.75rem 0;
}
实际项目里，flex-basis: 0 这个细节最容易被忽略，不写它，flex: 1 就会按内容宽度为基准再伸缩，结果反而不均等。 
