CSS display 布局决策指南：block、inline、flex、grid 到 contents 怎么选

display 看起来是 CSS 基础属性，但很多页面布局问题都从这里开始：按钮为什么换行、卡片为什么撑开、图文为什么对不齐、移动端为什么多出横向滚动。真正难的不是记住每个值，而是在真实页面里判断“这个模块应该使用哪种布局模型”。

这篇文章把 display 当作布局决策入口，而不是词典式解释。建议配合 CSS position 定位指南、CSS border 完整指南和前端框架对比矩阵一起阅读。

先给结论：display 决定元素参与哪种布局规则

同一个元素，设置不同 display，后续宽高、换行、对齐、子元素排列都会变。

display 值	适合场景	最容易出错的地方
block	页面区块、段落、容器	误以为能自动水平排列
inline	文本内强调、链接	设置宽高无效
inline-block	小标签、按钮、徽章	空白间隙和垂直对齐
flex	一维排列、导航、按钮组	用它硬做二维页面结构
grid	页面区域、卡片矩阵、复杂表单	用在过小的组件上反而复杂
none	条件隐藏	内容从可访问树中消失
contents	去掉包装层视觉盒	可访问性和兼容性要谨慎

如果你不知道该从哪里排查布局，先看这个元素和父元素的 display。

一、block 适合承载结构，不适合横向编排

block 元素默认独占一行，宽度通常撑满父容器。文章段落、页面 section、表单行、卡片容器都很适合使用 block。

常见误用是希望多个 block 自动横向排列，然后用 margin-left、固定宽度和负 margin 硬凑。这样桌面端可能勉强对齐，移动端一换行就会乱。

如果你想表达“这些子元素是一组横向项目”，父级应该考虑 display: flex。如果你想表达“这些卡片在两个方向上组成网格”，父级应该考虑 display: grid。

二、inline 的重点是文字流，不是组件盒子

inline 元素参与文本排版。链接、强调文字、短标签都适合 inline。它的特点是不会独占一行，但宽高设置通常不按盒子组件的方式生效。

例如一个链接需要像按钮一样有固定点击区域，就不应该保持纯 inline：

.action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
}

这里 inline-flex 既保留“像文字一样排在行内”的外部行为，又让内部可以按 flex 对齐。

三、inline-block 是小组件的过渡方案

inline-block 适合徽章、短按钮、标签、图标加文字这类小组件。它有盒子宽高，又能在一行里排列。

但它也有两个常见坑：

元素之间的 HTML 空白可能形成视觉间隙
与文字混排时，垂直对齐可能和预期不一致

在现代项目里，如果你需要更稳定的内部对齐，inline-flex 往往比 inline-block 更直接。

四、flex 解决一维问题：一排或一列怎么排

Flex 的强项是“一维排列”：导航项、按钮组、卡片内部图文、工具栏、表单操作区。

典型写法：

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

Flex 不是只能横向，也可以用 flex-direction: column 做纵向分布。判断是否适合 Flex，可以问：我主要是在一个方向上排列元素吗？如果答案是是，Flex 通常足够。

失败案例是把整个页面所有区块都塞进一个 flex 容器，再靠 flex-wrap、固定宽度和顺序调整做复杂布局。这样需求一变，模块高度和换行顺序都会变得难控。

五、grid 解决二维结构：行和列同时重要

Grid 适合页面级区域和卡片矩阵。例如官网首页的内容区、案例列表、价格表、仪表盘布局。

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

Grid 的价值是把“结构”写在父容器里，而不是让每个子元素自己猜位置。页面越接近区域系统，Grid 越有优势。