17370845950

使用 justify-content 可控制 Flexbox 水平菜单对齐方式：将 ul 设为 flex 容器后，设 justify-content 为 flex-start（左对齐）、flex-end（右对齐）、center（居中）、space-between（两端对齐）、space-around（周围等距）或 space-evenly（完全等距），结合移除列表默认样式与调整内边距，即可实现简洁响应式菜单布局。

使用 Flexbox 制作水平菜单栏时，可以通过 justify-content 属性轻松控制菜单项的对齐方式。只需将容器设置为 flex 布局，然后选择合适的对齐值即可实现不同效果。

基本 HTML 结构

通常菜单使用无序列表构建：

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 能快速实现各种对齐需求，适合响应式布局，代码也简洁。