CSS 資料型別 - <flex>

CSS 資料型別<flex> 表示網格容器中的彈性長度。此資料型別用於 grid-template-rows、grid-template-columns 及其他相關屬性。

語法

CSS 資料型別<flex> 表示為<number> 後跟單位fr。單位fr 表示網格容器中剩餘空間的分數。數字和單位之間無需空格。

/* Using an integer value */
2fr

/* Using a float value */
3.5fr

CSS <flex> - 用於 grid-template-columns 屬性

以下示例演示了<flex> 資料型別與grid-template-columns 屬性一起使用的用法，其中值為fr 單位，可以建立多個列。

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: 1fr 2.5fr 1fr;
      color: white;
      text-align: center;
      width: 360px;
      border: 2px solid black;
      background-color: tomato;
   }
   .grid-container > div {
      background-color: tomato;
      border: 2px solid black;
      padding: 10px;
   }     
</style>
</head>
<body>
   <h3>The grid layout has 3 columns.</h3>
   <div class="grid-container">
      <div class="grid-item1">Grid item 1</div>
      <div class="grid-item2">Grid item 2</div>
      <div class="grid-item3">Grid item 3</div>
      <div class="grid-item4">Grid item 4</div>
      <div class="grid-item5">Grid item 5</div>
      <div class="grid-item6">Grid item 6</div>
   </div>
</body>
</html>

列印頁面