使用flex-basis替代width/height为何导致兄弟元素无法正常展开？

我在页脚组件中实现了嵌套的横向Flexbox布局：外层是横向Flexbox容器（footer-container），内部嵌套了另一个横向Flexbox容器（row），内层容器需要水平排列三个div——两个文本列，中间是48px的间隔元素。

原始工作代码（效果符合预期） #

<div id="footer-container" class="flex-row">
  (其他无关组件)
  <div id="row" class="flex-row">
    <div class="flex-col">
      <span>Here is a link</span>
      <span>Here is another link</span>
    </div>
    <div style="width: 48px;"></div>
    <div class="flex-col">
      <span>Yet another link</span>
      <span>And another link</span>
    </div>
  </div>
</div>

该版本能正常显示：两个文本列之间保持48px水平间隔，文本均为单行展示。

需求与尝试 #

我希望制作一个可复用的React <Row>组件，允许客户端通过CSS媒体查询在任意断点将内层Flexbox切换为纵向布局，此时间隔元素需自动从水平宽度转为垂直高度。理想状态是客户端仅需修改flex-direction，间隔元素就能适配布局方向。

我尝试用flex-basis替代width来实现自适应，代码如下：

<div id="footer-container" class="flex-row">
  (其他无关组件)
  <div id="row" class="flex-row">
    <div class="flex-col">
      <span>Here is a link</span>
      <span>Here is another link</span>
    </div>
    <div style="flex-basis: 48px; flex-grow: 0; flex-shrink: 0;"></div>
    <div class="flex-col">
      <span>Yet another link</span>
      <span>And another link</span>
    </div>
  </div>
</div>

但修改后出现问题：文本列的内容会换行，无法保持单行展开。我理解flex-basis应根据Flexbox方向自动充当宽度或高度，为何会出现这种情况？这是浏览器Bug吗？

这不是浏览器Bug，是Flexbox布局的默认行为逻辑导致的。

问题根源 #

使用width:48px作为间隔时，内层Flex容器（#row）的子元素尺寸计算逻辑是：

• 间隔元素宽度固定为48px，文本列会自动占据容器剩余可用空间，因此文本能保持单行。

换成flex-basis:48px后，问题出在两个点：

1. Flex容器默认的align-items属性：横向Flex容器默认align-items: stretch，该属性仅控制子元素的高度拉伸，对宽度无强制约束。
2. 文本列的尺寸约束缺失：文本列（.flex-col）作为Flex子元素，默认未设置flex-grow:1或宽度限制，浏览器会优先压缩文本列的宽度以适配布局，最终导致文本换行。

解决方案 #

要实现“仅修改flex-direction即可自动适配间隔方向”的需求，只需做两处调整：

1. 给文本列添加flex-grow:1，让它们自动占据Flex容器的剩余空间，避免被压缩：

.flex-col {
  flex-grow: 1;
}

2. 保留间隔元素的flex-basis:48px与flex-grow:0; flex-shrink:0（可简写为flex: 0 0 48px），这样无论Flex容器是横向还是纵向，flex-basis都会自动对应水平宽度或垂直高度。

调整后的效果：

• 横向布局时，flex-basis:48px为水平间隔，文本列因flex-grow:1填满剩余空间，文本保持单行。
• 媒体查询切换为纵向布局时，flex-basis:48px自动转为垂直间隔，文本列垂直填充剩余空间，完全适配布局方向。

额外优化：可以用CSS变量统一管理间隔值，比如定义--row-gap:48px，间隔元素设置flex-basis:var(--row-gap)，后续修改间隔值会更便捷。

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