CSS技术问题：Flex容器中图片与div的表现差异原因

代码示例 #

CSS #

.d1 {
  border: 1px solid black;
  display: flex;
  width: 300px;
  height: 300px;
}

HTML #

<div class="d1">
  <img src="https://www.gravatar.com/avatar/4581a99fa5793feaeff38d989a1524c6?s=48&d=identicon&r=PG">
</div>

差异原因 #

这个差异本质是替换元素（img）和非替换元素（div）的尺寸特性不同，结合Flex布局的默认规则共同导致：

1. 垂直方向（交叉轴）的一致表现
   Flex容器默认设置align-items: stretch，只要子元素没有显式固定高度，都会被拉伸至容器的300px高度。不管是img还是div，都会遵循这个规则，所以两者都会沿高度方向填满容器。

2. 水平方向（主轴）的差异表现

• div（非替换元素）：
  div没有内置宽高比限制，宽度默认由自身内容决定（空div的宽度为0）。同时Flex项目默认flex-grow: 0，不会主动抢占容器的剩余水平空间，因此div只会维持自身内容所需宽度，不会拉满容器。

• img（替换元素）：
  img作为图片类替换元素，天生自带宽高比（示例中的identicon是1:1的正方形）。当它被align-items: stretch拉伸至300px高度时，会自动按照原始宽高比计算对应宽度，最终宽度也变为300px，刚好填满容器的水平空间。这就是为什么img会拉满容器宽高，而div仅拉满高度的核心原因。

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