<flex>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

<flex> は CSS のデータ型で、グリッドコンテナー内部における可変の長さを記述します。 grid-template-columns や grid-template-rows およびほかの関連プロパティで使われます。

構文

<flex> データ型は <number> のあとに単位 fr が付きます。 fr 単位はグリッドコンテナーの余った空間の割合を表します。他の CSS の数量と同様に、数値と単位の間に空白は入れません。

例

fr データ型の正しい値の例

1fr    /* 整数値の使用 */
2.5fr  /* 浮動小数点値の使用 */

CSS グリッドレイアウトのトラックリストでの使用例

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

仕様書

Specification
CSS Grid Layout Module Level 2
# fr-unit

ブラウザーの互換性

BCD tables only load in the browser

関連情報