使用Flexbox构建高性能响应式头部导航，核心是利用弹性盒模型让导航元素在不同屏幕下自动排列，并在移动端通过汉堡菜单收起内容。这种方式比传统float布局更少产生重排，渲染更高效。
基础HTML结构
我们先写一个语义清晰的导航结构，包含品牌区和菜单列表，以及移动端需要的汉堡按钮。
<header class="navbar">
<div class="brand">我的网站</div>
<button class="hamburger" aria-label="菜单">
<span></span><span></span><span></span>
</button>
<nav class="menu">
<ul>
<li><a href="https://ipipp.com">首页</a></li>
<li><a href="https://ipipp.com/about">关于</a></li>
<li><a href="https://ipipp.com/contact">联系</a></li>
</ul>
</nav>
</header>
Flexbox样式与响应式处理
通过display:flex让头部横向排布，菜单项用flex:1分配空间。媒体查询控制移动端隐藏菜单、显示汉堡。
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background: #fff;
}
.menu ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
margin-left: 20px;
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span {
width: 24px;
height: 2px;
background: #333;
margin: 4px 0;
}
@media (max-width: 768px) {
.hamburger { display: flex; }
.menu {
display: none;
width: 100%;
position: absolute;
top: 60px;
left: 0;
background: #fff;
}
.menu ul { flex-direction: column; }
.menu li { margin: 10px 0; }
.menu.open { display: block; }
}
汉堡菜单兼容性优化
为保证移动端点击区域和动画兼容，用JS切换open类，并避免300ms延迟。以下脚本简单可靠：
document.querySelector('.hamburger').addEventListener('click', function() {
var menu = document.querySelector('.menu');
// 切换菜单显示状态
menu.classList.toggle('open');
});
常见兼容问题
- 旧版UC浏览器对
flex-wrap支持差，尽量用简单flex属性。 - 绝对定位菜单在iOS需要父级
position:relative避免偏移。 - 汉堡按钮用
cursor:pointer提升触屏识别。
性能小结
Flexbox减少了布局计算，配合will-change:transform可让菜单滑动更顺。整体方案代码轻、适配快，适合大多数站点头部导航场景。