<display-legacy>

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;
}

• display
  • <display-outside>
  • <display-inside> (en-US)
  • <display-listitem> (en-US)
  • <display-internal>
  • <display-box>