CSS 数据类型 - <display-legacy>

CSS 2 中的 `display` 属性使用了单关键字语法，需要分别使用关键字来表示同一布局模型的块级和内联级变体。本章将讨论这些值。

可能的值

数据类型<display-legacy>具有以下有效值

inline-block：元素生成一个块级元素框，该框将与周围内容一起流动。等同于 inline flow-root。
inline-table：HTML 中没有直接映射。在行为上，它类似于<table> 元素，作为一个内联框，而不是块级框。等同于 inline table。
inline-flex：内容根据 flexbox 模型布局，其中元素的行为类似于内联元素。等同于 inline flex。
inline-grid：内容根据网格模型布局，其中元素的行为类似于内联元素。等同于 inline grid。

语法

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

CSS <display-legacy> - inline-grid

以下示例演示了使用旧关键字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

以下示例演示了使用旧关键字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>

打印页面