CSS 数据类型 <flex> 表示网格容器内的灵活长度。此数据类型用于 grid-template-rows、grid-template-columns 以及其他相关属性。
语法
CSS 数据类型 <flex> 表示为 <number> 后跟单位 fr。单位 fr 表示网格容器中剩余空间的分数。数字和单位之间不能指定空格。
/* 使用integer值 */
2fr
/* 使用float值 */
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>网格布局有 3 列</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>