header设为flex后.nav-bar子元素间距异常的原因解析

安全阿岳

2026-6-29

问题

我有一个.nav-bar元素，已经设置了以下CSS：

display:flex; 
justify-content:space-evenly

但给它的父元素header加上下面的CSS后，.nav-bar里的子元素就挤在一起了：

display:flex; 
justify-content:space-between;

删掉header的display:flex能解决一部分问题，而给.nav-bar加gap属性的话，子元素的间距就能正常保持。这是为啥？

附代码片段：

<!-- CSS -->
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-bar {
  list-style: none;
  display: flex;
  gap: 3rem;
}

<!-- HTML -->
<header>
  <img src="https://picsum.photos/id/237/200/300" width="40px" />
  
  <ul class="nav-bar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>

原因解析

header变flex容器后，.nav-bar的宽度被压缩了
当header设为flex容器时，里面的.nav-bar作为flex子项，默认flex-shrink:1——也就是会自动缩小来适应容器剩下的空间。之前.nav-bar是块级元素，会占满父容器的宽度，justify-content:space-evenly能在这个宽度里均匀分配子元素；现在它被缩到只能装下子元素的最小宽度，space-evenly没多余空间可以分配，子元素自然挤在一起。
去掉header的display:flex为啥有用
把header的display:flex删掉后，它变回普通块级元素，.nav-bar作为块级子元素又会占满父容器宽度，justify-content:space-evenly就能正常工作，子元素间距就回来了。
gap属性的特殊性
gap是直接给flex子项之间设固定间距，不管.nav-bar本身宽度多少，子元素之间的间距都会保持你设的3rem。哪怕.nav-bar被压缩，这个固定间距也不会变，所以子元素不会挤在一起。