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>

列印頁面