<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

正式语法

{{CSSSyntax}}

例子

在下面的例子中,我们使用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;
}

浏览器兼容性

支持 inline-block

BCD tables only load in the browser

支持 inline-table

BCD tables only load in the browser

支持 inline-flex

BCD tables only load in the browser

支持 inline-grid

BCD tables only load in the browser

相关链接