display: block和display: flex哪个布局方式更优？

不存在哪个效果更好的说法，两者的设计定位完全不同，适配的场景也不一样，搞懂两者的核心行为差异，按需选就不会出错。

• display: block 是块级元素的原生默认显示规则：元素本身会独占一行，默认宽度撑满父容器，沿垂直方向按正常文档流依次排布，它只定义元素自身的渲染特性，不会对子元素的布局逻辑做额外干预。
• display: flex 是专门的一维布局属性：设置了该值的元素本身会具备块级元素的特性（独占一行、默认宽度撑满父容器），但会额外创建弹性格式化上下文，内置了一整套子元素排列、对齐、剩余空间分配的规则，是为了解决传统布局（浮动、定位）实现复杂排列逻辑代码冗余、易出bug的问题设计的。

优先选 display: block 的场景 #

• 普通文档流内容排版：比如正文段落、文章内容块、不需要特殊排列规则的普通容器，直接用block即可，浏览器渲染开销更低，也不会因为flex的默认规则带来意外的布局偏移。这类场景下甚至不需要特意写display: block，因为div、p、h1-h6这类元素默认就是块级显示模式。
• 子元素不需要做特殊对齐、排列控制：比如只用来包裹内容的通用容器，没有横向排列、垂直居中、等间距分布这类需求时，没必要强行加flex。
• 兼容极低版本浏览器（IE9及更早版本）的场景：block是CSS1就定义的属性，全浏览器无兼容问题。

/* 普通文章容器，默认block即可，不需要额外写display属性 */
.article-wrap {
  padding: 20px;
  line-height: 1.7;
}

优先选 display: flex 的场景 #

• 需要做一维方向的线性排列：比如横向排布的导航栏、按钮组、标签列表，或者纵向排布的登录表单、垂直居中的弹窗内容，用flex实现比传统浮动、定位写法代码量少一半以上，也不需要处理浮动清除、定位偏移计算这类麻烦事。
• 需要灵活分配容器剩余空间：比如固定宽度侧边栏+自适应内容区的布局、几个子元素按比例占满容器宽度、子元素自动平分剩余间距这类需求，靠flex的flex-grow、flex-shrink、flex-basis属性可以快速实现，不需要手动计算宽度、写hack。
• 需要快速实现对齐效果：比如容器内元素垂直水平居中、元素沿容器两端对齐、子元素自动等间距排列，用flex的justify-content、align-items、gap属性一行代码就能搞定，不需要写margin负值、绝对定位偏移这类兼容性差、难维护的代码。

/* 顶部导航栏，flex实现两端对齐+垂直居中非常简单 */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 24px;
}

快速判断逻辑：如果只是需要元素按默认块级规则渲染，不需要干预内部子元素的排列、对齐、空间分配，就用block；如果需要控制内部子元素的排布规则，直接选flex就对了，现在主流浏览器（Chrome、Firefox、Edge、Safari、IE11）对flex的支持已经非常完善，绝大多数业务场景不需要担心兼容问题。

内容的提问来源于stack exchange，提问作者Make Me A Mattress