为何display:inline-flex+flex-direction:row时flex-basis无效，column时有效？

我是编程新手，想请教：为何设置display: inline-flex且flex-direction: row时flex-basis属性不生效，但设置flex-direction: column时却能正常生效？请尽量用简单易懂的语言解释。

我已尝试修改flex-direction属性来排查问题。

代码示例 #

<style>
    .container {
      color: white;
      border: 5px solid gold;
      display: inline-flex;
      flex-direction: column;
    }
    .container > div {
      flex-basis: 250px;
    }
   
    /*
Select all the elements that are the direct
children of the .container class.
    */

    .red {background-color: #eb4d4b;}
    .orange {background-color: #f0932b;}
    .yellow {background-color: #f6e58d;}
    .green {background-color: #6ab04c;}
    .blue {background-color: #4834d4;}
    .indigo {background-color: #30336b;}
    .purple {background-color: #be2edd;}
  </style>

<body>
  <div class="container">
    <div class="red">Red</div>
    <div class="orange">Orange</div>
    <div class="yellow">Yellow</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
    <div class="indigo">Indigo</div>
    <div class="purple">Purple</div>
  </div>
  
</body>

简单解释 #

核心要搞懂两个关键点：

• flex-basis的作用：它控制flex项目在主轴上的初始尺寸——flex-direction: row（水平主轴）时管宽度，flex-direction: column（垂直主轴）时管高度。
• inline-flex容器的特性：它属于行内元素，水平方向的宽度默认是「收缩包裹内容」，不会主动占满一行；但垂直方向的高度会跟着内容自动撑开，没有类似限制。

为什么row方向看起来没生效？ #

当设置flex-direction: row时，每个项目的flex-basis: 250px是想让它们宽度为250px，但inline-flex容器作为行内元素，最大宽度受限于父容器（比如body的宽度）。如果所有项目总宽度超过这个限制，flex项目会因为默认的flex-shrink: 1（自动收缩）被挤窄，看起来flex-basis没起作用。

为什么column方向正常生效？ #

当设置flex-direction: column时，flex-basis: 250px是设置项目的高度，inline-flex容器在垂直方向没有宽度那种限制，会自动把高度撑开，让每个项目都能达到250px的高度，所以效果很明显。

让row方向生效的小技巧 #

如果想让row方向时flex-basis生效，可以：

• 给.container设置足够宽的宽度（比如width: 1750px，对应7个项目×250px）；
• 或者给子元素加flex-shrink: 0，禁止项目自动收缩，这样每个项目就能保持250px的宽度。

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