前端Wiki/CSS/进阶/Flexbox 弹性布局

实战导航栏布局

把前面的知识串起来，做一个经典顶部导航：左边 logo，中间菜单，右边按钮。整条导航用 flex 横排，logo 与按钮组固定，菜单用 flex:1 居中撑开。

几个细节值得注意：

导航高度固定，配合 align-items: center 让所有子项垂直居中，不需要算行高。
菜单项之间的间距用 gap（容器属性）代替逐个写 margin，更干净。
悬停效果放在 a:hover 上，配合过渡（下一课程内容）会更顺滑。
窄屏下想让菜单收起，只需在媒体查询里改 flex-direction，这就是 Flex + 响应式的基本套路。

本节要点导航结构 = logo + 弹性菜单 + 操作区；中间 flex:1 撑开、space-between 也可实现两端分布；子项间距优先用 gap。

CSS

<style>
  .nav {
    display: flex;
    align-items: center;   /* 垂直居中 */
    gap: 20px;             /* 子项间距 */
    height: 56px;
    padding: 0 20px;
    background: #1f2937; color: #fff;
  }
  .logo { font-weight: bold; }
  .menu {
    flex: 1;               /* 占据中间全部空间 */
    display: flex;
    justify-content: center;
    gap: 24px;
  }
  .menu a { color: #cbd5e1; text-decoration: none; }
  .menu a:hover { color: #fff; }
  .login {
    background: #4a9eff;
    padding: 6px 16px; color: #fff;
  }
</style>
<nav class="nav">
  <span class="logo">前端Wiki</span>
  <div class="menu">
    <a href="#">HTML</a><a href="#">CSS</a><a href="#">JS</a>
  </div>
  <a class="login">登录</a>
</nav>

🔗 相关词条align-items flex 媒体查询过渡

📚 推荐阅读

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

移动前端开发经验指南万象云档

Element Plus v2.2 组件库教程万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读