display属性的flex与block取值有何区别？示例表现一致原因求解

为什么测试代码中两者表现一致 #

你当前的测试场景没有触发flex布局的差异化特性，所以视觉效果和block完全相同，核心原因有两点：

• <p>本身就是原生块级元素，display:block是它的默认取值，而display:flex同样属于块级外部显示类型，也就是说flex容器自身在父元素中的排布规则和block元素完全一致：默认宽度撑满父元素、单独占据一行、前后自动换行。你给两个元素设置了相同的高度，所以它们在父容器里的外部表现自然没有差异
• 你的flex容器内仅有一个文本节点，没有多个子元素。flex布局的核心能力是控制内部子元素的排布规则，当容器内只有一个子元素时，flex默认排布规则（主轴横向、子元素默认不伸缩）和block容器内单个文本/子元素的排布效果没有区别

flex和block的核心区别 #

两者的本质差异是内部显示类型完全不同：

• display:block的内部遵循正常流布局规则，子元素默认按照自身类型排布：块级子元素独占一行，行内/行内块元素横向排列、超出宽度自动换行，无法简单实现子元素垂直居中、等分宽度等布局需求
• display:flex的内部遵循弹性盒布局规则，你可以通过flex-direction、justify-content、align-items等属性灵活控制所有子元素的排布方向、对齐方式、伸缩比例，是专门为解决复杂一维布局需求设计的布局模式

你可以修改测试代码快速验证差异，比如给flex容器添加多个子元素并设置对齐规则：

.flex{
    display: flex;
    background-color: red;
    height: 200px;
    /* 新增flex布局属性 */
    justify-content: space-between;
    align-items: center;
}

<p class="flex">
    <span>子元素1</span>
    <span>子元素2</span>
    <span>子元素3</span>
</p>

修改后flex容器里的三个子元素会横向均匀分布，并且垂直居中，同样的效果用block布局无法简单实现。

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