CSS Flex布局中链接莫名换行的原因及解决方法

我来帮你把这个问题掰明白，顺便给你落地的解决办法：

一、链接换行的背后原因 #

其实换行的锅不在Flex布局本身，而是两个细节叠加导致的：

• 你给.nav设了width: fit-content，它的宽度会紧紧跟着内部元素的需求走，但<a>是行内元素，行内元素的默认行为就是：当容器宽度不够装下所有内容时，自动换行。
• 再加上Flex子项默认都开了flex-shrink: 1（允许被收缩），你给.center设的width:100%会让它先尝试占满整个容器宽度，直接把.nav挤得缩成一团，宽度小到装不下所有链接，于是链接就自动换行了。

二、为什么.center没占到剩余空间？ #

你设置的width:100%在Flex布局里不生效的核心原因是：Flex子项的空间分配规则优先看flex属性（flex-grow/flex-shrink/flex-basis），而不是直接的width。
默认情况下，.center的flex-grow: 0——意思是它不会主动去抢剩余空间，反而当总宽度超了，它还会跟着收缩。你设的width:100%只是它的初始期望宽度，但Flex布局会强制调整它的尺寸来满足容器的总宽度限制，所以它根本没机会占满剩余空间。

三、完美解决办法（两步走） #

1. 让.center牢牢占满左右之间的空间 #

把.center的width:100%删掉，换成flex: 1。这个简写属性的作用是：

• flex-grow:1：允许它抢占所有剩余空间
• flex-shrink:1：必要时可以收缩（其实这里不需要，但默认值不影响）
• flex-basis:0%：以0为基础尺寸开始分配空间，确保它真的填满左右元素之间的所有空隙

2. 阻止.nav里的链接换行 #

给.nav加两个属性：

• flex-shrink: 0：防止它被Flex布局挤压收缩，这样它的宽度会固定为所有链接的总宽度
• white-space: nowrap：强制内部的行内链接不换行

HTML（无需改动）

<div class="header"> 
  <h1>Title</h1> 
  <div class="center"> 
    <h1> TEST TEXT </h1> 
  </div> 
  <div class="nav"> 
    <a>A Link</a> 
    <a>Another Link</a> 
    <a>A Third Link</a> 
  </div> 
</div>

修改后的CSS

.header { 
  background: #ccc; 
  display: flex; 
  justify-content: space-between; 
} 
.nav{ 
  width: fit-content; 
  flex-shrink: 0; /* 禁止被挤压 */
  white-space: nowrap; /* 链接强制不换行 */
} 
.center{ 
  flex: 1; /* 核心：占据剩余全部空间 */
  background: lightblue; 
  text-align: center; 
} 
div a{ 
  background: tomato; 
}

这样调整后，不管窗口怎么缩放，.center都会稳稳占满左右元素之间的空间，.nav里的链接也不会再换行啦。

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