使用 justify-content 可控制 Flexbox 水平菜单对齐方式：将 ul 设为 flex 容器后，设 justify-content 为 flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐）、space-around（周围等距）或 space-evenly（完全等距），结合移除列表默认样式与调整内边距，即可实现简洁响应式菜单布局。
使用 Flexbox 制作水平菜单栏时，可以通过 justify-content 属性轻松控制菜单项的对齐方式。只需将容器设置为 flex 布局，然后选择合适的对齐值即可实现不同效果。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
基本 HTML 结构
通常菜单使用无序列表构建：<nav class="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
CSS 设置 flex 容器
将 ul 设为 flex 容器，并移除默认样式：.menu ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.menu a {
text-decoration: none;
padding: 12px 16px;
color: #333;
}
使用 justify-content 控制对齐
通过修改 justify-content 的值，可以实现多种对齐方式：- flex-start：菜单项靠左对齐（默认）
- flex-end：菜单项靠右对齐
- center：菜单项居中对齐
- space-between：两端对齐，中间间距相等
- space-around：每个项目周围有相等空间
- space-evenly：所有项目间和边缘间距完全相等
.menu ul {
display: flex;
justify-content: space-between;
}
如果希望菜单项之间间距一致且两侧留白：
.menu ul {
display: flex;
justify-content: center;
}
.menu li {
margin: 0 8px;
}
基本上就这些。用 flex 的 justify-content 能快速实现各种对齐需求，适合响应式布局，代码也简洁。 
