<flex>

基线 广泛可用

此功能已得到良好建立，可在许多设备和浏览器版本上运行。它自以下时间起在各浏览器中可用： 2020 年 7 月.

<flex> CSS 数据类型 表示网格容器内的灵活长度。它用于 grid-template-columns、grid-template-rows 和其他相关属性。

语法

<flex> 数据类型被指定为 <number> 后跟单位 fr。fr 单位表示网格容器中剩余空间的一部分。与所有 CSS 尺寸一样，单位和数字之间没有空格。

示例

fr 数据类型的正确值的示例

1fr    /* Using an integer value */
2.5fr  /* Using a float value */

在 CSS 网格布局的轨道列表中使用的示例

css
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}

规范

规范
CSS 网格布局模块级别 2
# fr-unit

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅