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>
