Flexbox中justify-content: space-between不生效问题求助

问题出在你给两个子div都加了flex-grow: 1，这会让它们平分容器宽度，同时你把justify-content加在了错误的层级上——应该给最外层的.top-nav设置，而不是子div。

优化后的代码 #

CSS 部分 #

.top-nav {
  display: flex;
  position: absolute;
  background-color: blue;
  opacity: 0.5;
  height: 10%;
  top: 0;
  width: 100%;
  left: 0;
  padding: 0;
  border: 0;
  margin: 0;
  /* 关键：让子元素分别靠左右对齐 */
  justify-content: space-between;
  align-items: center; /* 可选：让图片垂直居中 */
}

.top-nav div {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

HTML 部分 #

<div class="top-nav">
  <div><img src="/textures/logo.svg"></div>
  <div><img src="/textures/profile.svg"></div>
</div>

问题根源说明 #

• flex-grow: 1会让两个子div平分容器剩余宽度，导致它们无法贴紧屏幕两端，直接移除即可。
• justify-content: space-between是作用在父级flex容器（.top-nav）上的属性，它能让子元素在主轴上均匀分布，首尾元素自动贴紧容器边缘。
• 子div不需要设置display: flex，这里仅用于包裹图片，多余的flex设置反而会干扰布局。

如果不想让图片完全贴死屏幕边缘，可以给.top-nav添加左右内边距，比如padding: 0 16px;来预留空间。

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