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>

打印页面