用flex实现头部导航左中右分布，需设外层容器为flex并用justify-content: space-between分离三区，align-items: center垂直居中，中区自动居中无需额外样式。

用 Flex 布局实现头部导航的左中右三段式分布，关键在于把导航容器设为 flex 容器，并让 Logo、菜单、功能项成为三个独立子元素，再通过主轴对齐方式自然分离。

结构要清晰：三区必须分开

不能把 Logo 塞进菜单 <ul></ul> 里，也不能用浮动或绝对定位硬拉位置。正确结构是：

• 外层 <nav></nav> 或 <header></header> 作为 flex 容器
• 内部三个 <div>（或语义化标签）分别对应：<strong>左区 Logo</strong>、<strong>中区菜单</strong>、<strong>右区功能项</strong> <li>每个区域保持内容内聚，比如菜单用 <code><ul></ul>，功能项可放登录、搜索、用户头像等

CSS 核心三步：display + justify-content + align-items

给导航容器加这三条规则即可完成基础布局：

• display: flex —— 激活弹性布局
• justify-content: space-between —— 左区贴左、右区贴右、中间自动留空（即“左-中-右”视觉效果）
• align-items: center —— 所有子元素在高度方向垂直居中

如果想控制整体上下间距，加一句 padding: 0 1rem 即可防止贴边。


响应式烟草公司HTML5网站模板
响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

菜单居中不是靠 text-align，而是靠 flex 自动分配

很多人误以为要给中区加 text-align: center 或 margin: 0 auto，其实不用。只要结构是三个并列子元素，justify-content: space-between 就会让中间那个自然居中——它本质是“两端固定、中间均分剩余空间”。

若中区菜单本身是 <ul></ul>，建议也设为 flex：

• display: flex
• gap: 1.5rem 替代传统 margin 控制项距
• list-style: none; margin: 0; padding: 0 清除默认样式

响应式收起右区，不破坏结构

小屏时，右区功能项（如登录、注册）常被收进汉堡菜单。只需媒体查询中改写：

• @media (max-width: 768px) { .nav-right { display: none; } }
• 同时显示汉堡按钮，并用 JS 控制菜单展开逻辑
• Flex 布局天然支持这种显隐切换，不影响左中布局