<flex>

Baseline 已广泛支持

此特性已得到良好确立，可跨多种设备和浏览器版本使用。自 2017 年 3 月起，所有浏览器均支持此特性。

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

语法

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

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

css

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

规范
CSS 网格布局模块 Level 2 # fr-单位

本页面最后由 MDN 贡献者于 2025 年 10 月 10 日修改。