用Flex实现两端对齐、中间自适应导航栏的关键是外层容器设display:flex、justify-content:space-between和align-items:center，中间菜单单独包裹并设justify-content:center；响应式用flex-wrap:wrap，间距用gap控制。
用 Flex 实现两端对齐、中间自适应的导航栏，关键在于合理嵌套 + 正确设置 justify-content，不需要 JavaScript，也不依赖浮动或定位。
基础结构：三段式语义化布局
HTML 结构建议清晰分层：
- 外层容器设为
display: flex和justify-content: space-between，让左、右两块自然贴边； - 中间菜单（如
<ul>）单独包裹一层<div class="nav-center">； - 这个中间容器再设
display: flex和justify-content: center，确保内部菜单项水平居中，不受左右元素挤压。
垂直居中：靠 align-items 一步到位
导航栏通常需要文字或图标在高度方向上视觉居中。只需在外层容器加一句：
-
align-items: center—— 所有子元素（logo、菜单容器、登录按钮）自动垂直居中； - 若某一项需单独调整（比如图标略高），可用
align-self: flex-start等覆盖。
响应式换行：小屏下自动竖排或单列
当屏幕变窄，三段挤不下时：
- 给外层容器加
flex-wrap: wrap，允许换行； - 配合
justify-content: center或flex-start控制每行内元素对齐； - 中间容器可设
flex: 1或固定宽度，避免换行后错位。
间距控制：用 gap 替代 margin 更干净
如果中间菜单项之间需要等距，不要给每个 <li> 加 margin：
- 直接在
<ul>上设gap: 1rem，浏览器自动处理间隙，无首尾额外空白； - gap 对 flex 和 grid 都生效，比手动算 margin 更可靠、易维护。
