flex设置space-between时左右宽度不等如何让中间元素居中

问题原因 #

justify-content: space-between的布局逻辑是将flex容器的剩余空间平均分配在所有子元素的相邻间隙中，子元素默认按自身内容宽度渲染，左右两侧子元素会分别贴住容器左右边缘。一旦左右两个子元素的自身宽度不相等，中间元素就会向宽度更小的一侧偏移，无法保持居中。

可行解决方案 #

方案1：Flex等分布局（兼容性最好，最推荐） #

放弃space-between，让三个导航子项平分导航栏宽度，再分别控制每个子项内部内容的对齐方向：

/* 导航容器 */
.navbar {
  display: flex;
  align-items: center;
  width: 100%;
}
/* 三个导航子项统一设置 */
.nav-item {
  flex: 1; /* 所有子项均分容器宽度 */
  display: flex;
  align-items: center;
}
/* 左侧项内容左对齐 */
.nav-item.left {
  justify-content: flex-start;
}
/* 中间项内容居中 */
.nav-item.center {
  justify-content: center;
}
/* 右侧项内容右对齐 */
.nav-item.right {
  justify-content: flex-end;
}

这种方案不管左右两侧的logo、按钮实际占多宽，三个子项的占位宽度始终相等，中间导航项永远处于容器正中心，不会出现偏移。

方案2：Grid布局（代码最简洁） #

用CSS Grid直接定义三列结构，左右两列等宽，中间列自适应内容，分别控制对齐即可：

.navbar {
  display: grid;
  /* 左右两列等比例占剩余空间，中间列自适应内容宽度 */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.nav-item.left {
  justify-self: start;
}
.nav-item.center {
  justify-self: center;
}
.nav-item.right {
  justify-self: end;
}

该方案不需要给子项额外设置flex属性，代码更精简，现代浏览器全支持。

方案3：绝对定位固定左右项 #

如果不想改变子项的自身宽度，可以直接将导航容器设为相对定位，把左右两个元素钉在容器两侧，中间元素正常居中：

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 100%;
  /* 记得加左右内边距，避免中间内容和左右定位的元素重叠 */
  padding: 0 16px;
  box-sizing: border-box;
}
.nav-item.left {
  position: absolute;
  left: 16px;
}
.nav-item.right {
  position: absolute;
  right: 16px;
}

注意：该方案需要手动控制左右元素和中间元素的宽度，避免屏幕较窄时出现内容重叠。

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