<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。

形式语法

<display-legacy> = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

示例

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

HTML

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

Not a flex item

CSS

.container {
  display: inline-flex;
}

结果

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

.container {
  display: inline flex;
}

浏览器兼容性

css.properties.display.inline-block

BCD tables only load in the browser

css.properties.display.inline-table

BCD tables only load in the browser

css.properties.display.inline-flex

BCD tables only load in the browser

css.properties.display.inline-grid

BCD tables only load in the browser

参见