<display-legacy>

语法

有效的 <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

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

Not a flex item

CSS

.container {
  display: inline-flex;
}

结果

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

.container {
  display: inline flex;
}

规范

浏览器兼容性

css.properties.display.inline-block

css.properties.display.inline-table

css.properties.display.inline-flex

css.properties.display.inline-grid

另见

• display
  • <display-outside>
  • <display-inside>
  • <display-listitem>
  • <display-internal>
  • <display-box>