<display-legacy> - CSS（层叠样式表）编辑

CSS 2使用单个关键字来指定display的属性，对于相同布局模式的 block 级和 inline 级变体需要使用单独的关键字。本文详述这些关键字。

语法

inline-block: 元素会产生一个块元素盒子，并且像内联盒子一样（表现得更像一个被替换的元素），可以融入到周围内容中。

等同于 inline flow-root。
inline-table: 在HTML中， inline-table 没有直接对应关系。它表现为一个HTML <table> 元素，但是又表现为一个不同于块级盒子的内联盒子。表盒子内部是一个块级上下文。

等同于 inline table。
inline-flex: 元素表现为一个内联元素，并对内容采用弹性盒子模型进行布局。

等同于 inline flex。
inline-grid: 元素表现为一个内联元素，并对内容采用网格模型进行布局。

等同于 inline grid。

该属性的语法尚未添加

在下面的例子中，我们使用inline-flex关键字（遗留关键字），创建一个inline flex的容器。

<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item

.container {
  display: inline-flex;
}

新的语法中，使用两个关键字来创建inline flex容器，inline用来指定外部显示类型, flex用来指定内部显示类型。

.container {
  display: inline flex;
}

本页面上的兼容性表格，是通过解构化数据生成的。如果你想修改数据，请查看 https://github.com/mdn/browser-compat-data ，然后提交pull request。

BCD tables only load in the browser

BCD tables only load in the browser

BCD tables only load in the browser

BCD tables only load in the browser