17370845950

用Flex布局实现头部logo与菜单横向排列的关键是设header为flex容器并合理设置对齐与空间分配：默认row主轴使元素横排，align-items: center垂直居中，nav用margin-left: auto右对齐或flex: 1居中，ul用gap控制间距，移动端用媒体查询隐藏nav并显示汉堡菜单。

用 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 垂直居中即可