--- title: slug: Web/CSS/display-legacy translation_of: Web/CSS/display-legacy ---

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

语法

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

等同于 inline flow-root。
inline-table: 在HTML中， inline-table 没有直接对应关系。它表现为一个HTML {{HTMLElement("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;
}