CSS 2 中的 display 属性使用了单关键字语法，这需要为同一布局模型的块级和内联级变体使用单独的关键字。本章将讨论这些值。
可能的值
数据类型 <display-legacy> 具有以下有效值：
- inline-block：元素生成一个块元素框，该框将与周围的内容一起流动。等效于内联流根。
- inline-table：HTML 中没有直接映射。在行为上，它类似于 <table> 元素，作为内联框而不是块级框。等效于内联表。
- inline-flex：内容按照 flexbox 模型进行布局，其中元素的行为类似于内联元素。等同于内联 flex。
- inline-grid：内容根据网格模型进行布局，其中元素的行为类似于内联元素。等同于内联网格。
语法
<display-legacy> = inline-block | inline-table | inline-flex | inline-grid
CSS <display-legacy> - 内联网格
以下示例演示了一个带有旧关键字 inline-grid 的内联网格容器：
<html>
<head>
<style>
.container-legacy {
display: inline-grid;
border: 2px solid black;
background-color: yellow;
padding: 5px;
margin: 5px;
}
.container-new {
display: inline grid;
border: 2px dashed green;
background-color: peachpuff;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<h2>inline-grid example</h2>
<h3>legacy keyword - inline-grid</h3>
<div class="container-legacy">
<div>Grid Item 1</div>
<div>Grid Item 2</div>
</div>
<hr>
<h3>new keyword - inline grid</h3>
<div class="container-new">
<div>Grid New 1</div>
<div>Grid New 2</div>
</div>
</body>
</html>
CSS <display-legacy> - 内联弹性
以下示例演示了一个带有旧关键字 inline-flex 的内联 flex 容器：
<html>
<head>
<style>
.container-legacy {
display: inline-flex;
border: 2px solid black;
background-color: yellow;
padding: 5px;
margin: 5px;
}
.container-new {
display: inline flex;
border: 2px dashed green;
background-color: peachpuff;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<h2>inline-flex example</h2>
<h3>legacy keyword - inline-flex</h3>
<div class="container-legacy">
<div>Flex Item 1</div>
<div>Flex Item 2</div>
</div>
<hr>
<h3>new keyword - inline flex</h3>
<div class="container-new">
<div>Flex New 1</div>
<div>Flex New 2</div>
</div>
</body>
</html>
