<display-legacy>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

CSS 2 为 display 属性使用单关键字的语法,对于相同布局模式的块级和行级变体要求使用各自的关键字。本文详述这些关键字。

语法

有效的 <display-legacy> 值:

inline-block

元素将生成块级元素盒,将被视为单个行级盒(表现为替换元素)与周围内容构成内容流。

等同于 inline flow-root

inline-table

inline-table 在 HTML 中没有直接的对应关系。此值表现为 HTML <table> 元素,但是为行级盒而非块级盒。表格盒内部为块级上下文。

等同于 inline table

inline-flex

元素表现为行级元素,并按弹性盒模型对其内容进行布局。

等同于 inline flex

inline-grid

元素表现为行级元素,并按网格模型对其内容进行布局。

等同于 inline grid

形式语法

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

示例

在以下示例中,我们将用旧式关键字 inline-flex 创建行级弹性容器。

HTML

html
<div class="container">
  <div>弹性元素</div>
  <div>弹性元素</div>
</div>

非弹性元素

CSS

css
.container {
  display: inline-flex;
}

结果

在新的语法中,将使用两个值创建行级弹性容器,inline 用于外侧显示类型,flex 用于内侧显示类型。

css
.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

参见