CSS头部布局：Flex快速实现Logo与菜单排列

本文深入浅出地讲解了如何利用 CSS Flex 布局高效构建响应式网页头部——通过将 header 设为 flex 容器，结合 align-items 垂直居中、margin-left: auto 或 flex: 1 灵活控制 logo 与导航菜单的左右分布，借助 gap 精准管理菜单项间距，并通过媒体查询与 JavaScript 配合实现移动端汉堡菜单的优雅收放，让开发者轻松掌握现代头部布局的核心技巧。

用 Flex 布局实现头部 logo 与菜单的横向排列非常高效，关键是把 header 设为 flex 容器，再合理设置主轴方向、对齐方式和空间分配。

设置 header 为 flex 容器

给 header 元素添加 display: flex，默认主轴为水平（row），子元素（logo 和 nav）就会自动排成一行：

header {
  display: flex;
  align-items: center; /* 垂直居中，避免 logo 和文字上下错位 */
  padding: 0 1rem;
}

控制 logo 和菜单的左右分布

常用两种方式，按需选择：

• 左 logo + 右菜单：给 nav 添加 margin-left: auto，它会自动挤占剩余空间，把菜单“推”到最右边
• 左 logo + 居中菜单 + 右空位或按钮：给 nav 添加 flex: 1，再配合 text-align: center 或内部 ul 的 justify-content: center

处理菜单项间距与换行

导航链接（a 或 li）通常需要等距或紧凑排列：

• 菜单容器（如 nav ul）加 display: flex，再用 gap: 1.5rem 统一控制项间距（推荐，比 margin 更干净）
• 若菜单项过多可能折行，加 flex-wrap: wrap 并设 flex-direction: row（默认可不写），再配合 max-width 控制响应行为

适配小屏幕收起菜单

在移动端，通常隐藏菜单、显示汉堡图标：

• 用 @media (max-width: 768px) 把 nav 设为 display: none
• 同时让汉堡按钮（如 .menu-toggle）显示，并用 JS 控制 nav 的显隐切换
• 此时 header 仍保持 flex，只需调整 align-items 和 padding 保证 logo 垂直居中即可

终于介绍完啦！小伙伴们，这篇关于《CSS头部布局：Flex快速实现Logo与菜单排列》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！