为何flex-direction:column时图片自动适配容器，row时却不？

先看你的代码示例：

容器样式：

div {
    display: flex;
    flex-direction: column;
    border: 5px solid black;
    width: 400px;
    height: 400px;
}

HTML结构：

<div>
    <img src="https://mdn.github.io/css-examples/learn/images/balloons.jpg" alt="">
</div>

核心原因：flex布局的主轴/交叉轴规则 + 替换元素的宽高比特性 #

当flex-direction: column时：

• 垂直方向是flex的主轴，容器高度固定400px；水平方向是交叉轴，容器宽度固定400px。
• flex项（图片）的默认规则：flex-shrink: 1（允许主轴方向缩小），align-items: stretch（交叉轴方向自动拉伸至容器尺寸）。
• 图片是替换元素，会强制保持自身宽高比。首先交叉轴的stretch会把图片宽度拉到容器的400px，图片高度会按比例自动计算；如果这个计算后的高度超过容器的400px，flex-shrink:1会启动，把图片在垂直方向缩小，最终让图片刚好填满400x400的容器。

当flex-direction: row时：

• 水平方向是主轴，容器宽度400px；垂直方向是交叉轴，容器高度400px。
• 同样flex-shrink:1会把图片宽度缩小到400px（如果原始宽度超了），但交叉轴的stretch对图片无效——替换元素默认不会被拉伸破坏宽高比，所以图片高度会按缩小后的宽度计算，通常会小于容器的400px，自然就没填满整个容器。

简单说：column时交叉轴的拉伸先定死宽度，再靠主轴的收缩把高度压到容器尺寸；row时交叉轴的拉伸无法改变图片高度，只能保持宽高比，所以填不满容器。

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