CSS 資料型別 - <display-inside>

CSS <display-inside> 資料型別決定元素的內部顯示方式，它為非替換元素指定了格式化上下文型別。這些關鍵字定義了 `display` 屬性的值。它們可以作為舊版瀏覽器的單個關鍵字使用，也可以與來自 <display-outside> 關鍵字的值一起使用。

可能的值

flow-root − 它為元素建立一個新的塊級格式化上下文。
table − 元素本身成為一個類似於 HTML 表格的塊級容器。
flex − 元素作為塊級元素工作，並根據 Flexbox 模型排列其內容。
grid − 元素作為塊級元素工作，並根據 Grid 模型排列其內容。

語法

<display-inside>: flow-root | table | flex | grid;

CSS <display-inside> - flow-root

下面的例子演示了display: flow-root 屬性如何建立一個塊級格式化上下文幷包含浮動元素：

<html>
<head>
<style>
   .container {
      display: flow-root;
      border: 2px solid blue;
      padding: 10px;
   }
   .float-left {
      float: left;
      height: 30px;
      width: 50%;
      background-color: pink;
   }
   .float-right {
      float: right;
      height: 30px;
      width: 50%;
      background-color: yellow;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="float-left">Floating Left</div>
      <div class="float-right">Floating Right</div>
   </div>
</body>
</html>

CSS <display-inside> - table

下面的例子演示了display: table 屬性如何將元素定義為表格：

<html>
<head>
<style>
   .table-container {
      display: table;
      width: 100%;
      border-collapse: collapse;
      background-color: pink;
   }
   .row {
      display: table-row;
   }
   .column {
      display: table-cell;
      border: 2px solid blue;
      padding: 5px;
   }
</style>
</head>
<body>
   <div class="table-container">
      <div class="row">
         <div class="column">Row 1, Column 1</div>
         <div class="column">Row 1, Column 2</div>
         <div class="column">Row 1, Column 3</div>
      </div>
      <div class="row">
         <div class="column">Row 2, Column 1</div>
         <div class="column">Row 2, Column 2</div>
         <div class="column">Row 2, Column 3</div>
      </div>
   </div>
</body>
</html>

CSS <display-inside> - flex

下面的例子演示了display: table 屬性如何將元素定義為表格元素：

<html>
<head>
<style>
   .flex-container {
      display: flex; 
      align-items: center; 
      height: 50px; 
      padding: 5px;
      gap: 5px;
      background-color: red;
   }
   .flex-item {
      padding: 10px;
      border: 2px solid green;
      background-color: yellow;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item">Flex Item 1</div>
      <div class="flex-item">Flex Item 2</div>
      <div class="flex-item">Flex Item 3</div>
   </div>
</body>
</html>

CSS <display-inside> - grid

下面的例子演示了display: grid 屬性如何建立一個包含三列兩行的基本網格佈局：

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: 100px 100px 100px; 
      grid-template-rows: 50px 50px; 
      gap: 5px; 
      align-items: center;
      background-color: pink;
      padding: 5px;
   }
   .grid-item {
      background-color: yellow;
      padding: 10px;
      text-align: center;
      border: 3px solid red;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-item">Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div class="grid-item">Grid Item 3</div>
      <div class="grid-item">Grid Item 4</div>
      <div class="grid-item">Grid Item 5</div>
      <div class="grid-item">Grid Item 6</div>
   </div>
</body>
</html>

列印頁面