使用 justify-content: space-between 可实现弹性导航菜单布局，第一个元素左对齐、最后一个右对齐，中间间距均匀分布；通过 Flexbox 将 .logo 与 .nav-menu 分置两端，配合 align-items: center 垂直居中，结合媒体查询适配移动端，实现响应式设计。
在现代网页设计中，导航菜单需要具备良好的响应式表现和灵活的布局结构。使用 CSS Flexbox 的 justify-content: space-between 可以轻松实现弹性导航菜单，让菜单项均匀分布，首尾项目分别对齐容器两端。
什么是 justify-content: space-between？
在 Flexbox 布局中，justify-content 用于定义主轴（默认为水平轴）上的对齐方式。space-between 的作用是：将所有子元素沿主轴均匀分布，第一个元素靠左对齐，最后一个元素靠右对齐，中间的空白区域平均分配给各元素之间的间隔。
这非常适合构建导航菜单，尤其是当菜单包含 Logo 和多个菜单项时，可以实现“左对齐 Logo + 右对齐菜单项”或“菜单项等距分布”的效果。
基本 HTML 结构
一个典型的导航菜单结构如下：
CSS 实现弹性布局
通过以下样式启用 Flexbox 并使用 space-between：
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #fff;
border-bottom: 1px solid #ddd;
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-menu a {
text-decoration: none;
color: #333;
padding: 0.5rem 1rem;
}
.nav-menu a:hover {
color: #007acc;
}
关键点说明：
- display: flex 在 .navbar 上启用弹性布局
- justify-content: space-between 让 .logo 和 .nav-menu 分别贴住左右边缘
- align-items: center 确保垂直居中对齐
- .nav-menu 内部也使用 flex，使其菜单项水平排列
响应式处理建议
在小屏幕上，可切换为汉堡菜单：
- 使用媒体查询控制布局变化
- 在移动端将 .nav-menu 设为隐藏，通过按钮触发显示
- 保持桌面端的 space-between 效果，移动端采用堆叠或侧边栏布局
基本上就这些。利用 Flexbox 的 justify-content: space-between，你可以快速构建一个语义清晰、布局美观且易于维护的弹性导航菜单，无需浮动或定位 hack，代码更简洁，适应性更强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
