响应式导航栏可通过Flexbox和Grid实现；Flexbox使用flex-wrap与flex-basis控制换行和尺寸，配合媒体查询适配小屏；Grid利用repeat(auto-fit/auto-fill)与minmax实现自适应列布局，auto-fit会拉伸填充容器，auto-fill保留空轨道；简单一维布局选Flex，等分布局或需精确控制时选Grid，两者均无需复杂代码且兼容现代浏览器。
响应式导航栏是现代网页设计中的常见需求。使用 CSS 的 Flexbox 和 Grid 布局可以轻松实现自适应的导航结构，无论屏幕大小如何变化，都能保持良好的可读性和可用性。下面通过 flex-wrap 与 grid auto-fit / auto-fill 的实际应用，展示几种实用的响应式导航布局方案。
使用 Flexbox 实现响应式导航（flex-wrap）
Flexbox 非常适合创建水平导航栏，并在小屏幕上自动换行。
关键思路：设置容器为 flex 布局，启用 flex-wrap: wrap，让子项在空间不足时自动折行。
立即学习“前端免费学习笔记（深入）”；
<nav class="navbar-flex"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">服务</a> <a href="#">产品</a> <a href="#">联系</a> </nav>
CSS 样式如下：
立即学习“前端免费学习笔记（深入）”；
.navbar-flex {
display: flex;
flex-wrap: wrap;
gap: 10px;
background-color: #333;
padding: 10px;
}
<p>.navbar-flex a {
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 4px;
flex: 1 1 120px; /<em> 最小宽度约120px后换行 </em>/
text-align: center;
background-color: #555;
}</p><p>@media (max-width: 600px) {
.navbar-flex a {
flex-basis: calc(50% - 5px); /<em> 一行最多两个 </em>/
}
}</p>说明：
- flex-wrap: wrap 允许项目换行
- flex: 1 1 120px 表示每个导航项最小宽度 120px，达到后可换行
- 媒体查询中调整 flex-basis 控制小屏下的每行数量
使用 Grid 实现响应式导航（auto-fit 与 auto-fill）
Grid 提供了更强大的列控制能力，特别适合等分布局。
立即学习“前端免费学习笔记（深入）”；
<nav class="navbar-grid"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">服务</a> <a href="#">产品</a> <a href="#">联系</a> </nav>
CSS 使用 repeat() 搭配 auto-fit 或 auto-fill：
立即学习“前端免费学习笔记（深入）”；
.navbar-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
background-color: #333;
padding: 10px;
}
<p>.navbar-grid a {
color: white;
text-decoration: none;
padding: 10px;
text-align: center;
background-color: #555;
border-radius: 4px;
}</p>两种模式的区别：
- auto-fit：将空轨道“挤压”掉，已有的列会拉伸填满容器
- auto-fill：保留所有可能的轨道，即使为空，适合固定列数但内容动态的场景
例如：
-
repeat(auto-fit, minmax(120px, 1fr))—— 小屏下自动变为单列，大屏自动均分 -
repeat(auto-fill, minmax(120px, 1fr))—— 可能出现末尾空白列，需配合其他样式处理
何时选择 Flex 还是 Grid？
两者都能实现响应式导航，选择取决于布局复杂度：
- 简单一维布局（横向或纵向排列），推荐使用 Flex + flex-wrap
- 需要精确控制列宽、对齐和网格行为时，Grid + auto-fit 更灵活
- Grid 在等分布局上代码更简洁，无需媒体查询即可实现自适应
基本上就这些。根据项目需求选择合适的方式，两者都支持现代浏览器，且维护成本低。关键是理解 minmax()、flex-basis 和 wrap 的作用机制，就能灵活应对各种响应式场景。
