如何在Flex容器中实现多元素对齐：左链接居左、Logo居中、右链接居右

要实现左侧链接居左、Logo居中、右侧链接居右且列表项横向排列的布局，只需调整以下几点：

1. 完善父容器.header的Flex配置 #

给.header添加宽度占满规则和主轴分布逻辑，让三个子元素自动分配空间：

.header {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  align-items: center;
  /* 新增：让头部占满容器宽度 */
  width: 100%;
  /* 新增：子元素沿主轴两端对齐，中间元素自动居中 */
  justify-content: space-between;
  /* 可选：添加上下内边距，避免内容贴边 */
  padding: 8px 16px;
  box-sizing: border-box;
}

2. 修正列表默认样式并设置横向排列 #

浏览器默认给<ul>加了左内边距，需要清除；同时让列表项横向排列：

ul {
  list-style-type: none;
  /* 清除默认内边距和外边距 */
  padding: 0;
  margin: 0;
  /* 让列表项横向排列 */
  display: flex;
  /* 可选：给列表项之间添加间距 */
  gap: 12px;
}

3. 删除冗余配置 #

原代码中给.left-links、.right-links、.logo设置的display: flex和justify-content都是多余的，直接删除即可——父容器的Flex已经足够控制整体布局。

最终完整CSS代码 #

.header {
  font-family: monospace;
  background: papayawhip;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 8px 16px;
  box-sizing: border-box;
}

.logo {
  font-size: 48px;
  font-weight: 900;
  color: tomato;
  background: white;
  padding: 4px 32px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 12px;
}

a {
  font-size: 22px;
  background: white;
  padding: 8px;
  text-decoration: none;
}

效果说明 #

• .header的justify-content: space-between会让.left-links贴左、.right-links贴右，中间的.logo自动处于容器水平居中位置；
• <ul>设置display: flex后，列表项会横向排列，gap属性控制项之间的间距；
• 清除<ul>的默认内边距，避免链接整体偏移。

内容的提问来源于stack exchange，提问作者Trxsh