Flex容器中作为flex item的block与inline-block元素表现一致吗？有何差异？

当元素成为flex容器的子项（flex item）时，浏览器会忽略其原始的display属性（除display: none外），统一应用flex item的核心规则（比如默认宽度适配内容、margin不折叠等），但两者仍存在以下细微但关键的差异：

1. 基线对齐行为不同 #

当flex容器设置align-items: baseline时，block和inline-block元素的基线定位逻辑有明显区别：

• Block元素作为flex item时，基线是其margin盒子的下边缘
• Inline-block元素作为flex item时，基线是其内部文本或可替换元素的基线

示例代码：

.parent {
  display: flex;
  align-items: baseline;
  border: 2px solid #333;
  padding: 8px;
}
.block-item {
  display: block;
  margin: 12px;
  padding: 6px;
  background: #f0f0f0;
}
.inline-block-item {
  display: inline-block;
  margin: 12px;
  padding: 6px;
  background: #e0e0e0;
}

<div class="parent">
  <div class="block-item">Block Item</div>
  <div class="inline-block-item">Inline-Block Item</div>
</div>

这段代码运行后，block元素的底部会和inline-block元素的文本基线对齐，导致两者的垂直位置不一致。

2. 容器内部空白字符处理不同 #

如果flex item本身作为容器容纳子元素，原始display属性的特性会影响内部布局：

• Inline-block容器内的空白字符（换行、空格）会被保留并占据空间，和常规流中的inline-block表现一致
• Block容器内的空白字符会被浏览器忽略，不会产生额外间距

示例：

.parent {
  display: flex;
  gap: 16px;
}
.block-container {
  display: block;
  background: #f0f0f0;
}
.inline-block-container {
  display: inline-block;
  background: #e0e0e0;
}

<div class="parent">
  <div class="block-container">
    <span>文本1</span>
    <span>文本2</span>
  </div>
  <div class="inline-block-container">
    <span>文本1</span>
    <span>文本2</span>
  </div>
</div>

这里inline-block容器内的两个<span>之间会有空白间距，而block容器内的<span>会紧密排列。

3. 可替换元素的常规流遗留差异（仅作参考） #

如果是img、input这类可替换元素：

• 作为block元素时，常规流中默认宽度会填满容器，但作为flex item时会恢复为自身固有尺寸
• 作为inline-block元素时，常规流和flex容器中默认都是自身固有尺寸
  不过这一点在flex容器中表现一致，差异仅存在于常规流，不会影响flex布局下的表现。

总结：flex布局会统一flex item的核心渲染规则，但原始display属性的一些细节特性（如基线定位、内部空白处理）仍会保留，导致block和inline-block作为flex item时存在上述差异。

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