display: flex 比 float 更可靠，因 float 脱离文档流致父容器塌陷，需清浮动；flex 是布局上下文，子项默认不换行、主轴排列，无需 hack，且 IE10+ 兼容良好。
导航栏用
为什么比
更可靠
因为
会脱离文档流，导致父容器高度塌陷，必须额外清浮动；而
是布局上下文本身，子项默认不换行、自动沿主轴
排列
，无需 hack。现代项目中，只要支持 IE10+（
基础属性兼容良好），就该优先用
。
容器的必要
设置
只写
不够，常见遗漏点包括：
或
控制项间距，避免手动加
垂直居中
文字和图标，否则链接可能上下错位
给
设
或
时，要确认子项
没有默认
干扰对齐
若需响应式折叠，先确保主轴方向是
（默认值），别误设
标签在
中的常见表现问题
直接把
当 flex item 用没问题，但要注意：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
默认是 inline 元素，在 flex 容器中会自动变成
，但若内部有
或
，可能因基线对齐导致高低不一
点击区域小？给
加
或
并设
，别只靠
hover 效果失效？检查是否被父级
截断，或
的
被其他层覆盖
移动端点击延迟？那是
浏览器
默认行为，和 flex 无关，需加
水平等宽导航项的两种稳妥写法
要让每个菜单项宽度均分，不能只靠
—— 它会让内容撑开，文字长短不同会导致宽度不一致。真正可控的是：
立即学习
“
前端免费学习笔记（深入）
”；
方案一：所有
设
+
，适合文字长度接近的场景
方案二：用
（即
），强制从零开始均分剩余空间，文字再长也不会挤占别人位置
实际项目里，
这个细节最容易被忽略，不写它，
就会按内容宽度为基准再伸缩，结果反而不均等。
display: flexfloatfloatflexflexflexnavflexdisplay: flexjustify-content: space-betweenspace-aroundmarginalign-items: centernavheightline-heightavertical-align: baselinerowflex-direction: columnnav {
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;
}aflexaaflex-itemimgspanadisplay: blockinline-blockpaddingline-heightoverflow: hiddenaz-indextouch-action: manipulationflex: 1aflex: 1text-align: centerflex: 1 1 0flex-grow: 1; flex-shrink: 1; flex-basis: 0nav a {
flex: 1 1 0;
text-align: center;
padding: 0.75rem 0;
}flex-basis: 0flex: 1