<display-legacy>

CSS 2 使用单关键字语法表示 display 属性，需要分别使用关键字表示同一布局模式的块级和内联级变体。此页面详细介绍了这些值。

语法

有效的 <display-legacy> 值

该元素生成一个块级元素框，该框将与周围内容一起流动，就像它是一个单独的内联框一样（行为与替换元素类似）。

它等效于 inline flow-root。

inline-table 值在 HTML 中没有直接映射。它的行为类似于 HTML <table> 元素，但作为内联框，而不是块级框。表格框内是块级上下文。

它等效于 inline table。

该元素的行为类似于内联元素，并根据 Flexbox 模型布局其内容。

它等效于 inline flex。

该元素的行为类似于内联元素，并根据网格模型布局其内容。

它等效于 inline grid。

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

在下面的示例中，我们使用旧版关键字 inline-flex 创建了一个内联 Flex 容器。

html

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

Not a flex item

css

.container {
  display: inline-flex;
}

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

css

.container {
  display: inline flex;
}

规范
CSS Display 模块级别 3 # typedef-display-legacy

BCD 表格仅在浏览器中加载

BCD 表格仅在浏览器中加载

BCD 表格仅在浏览器中加载

BCD 表格仅在浏览器中加载