<flex>

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年3月以降、すべてのブラウザーで利用可能です。

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

構文

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

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

css

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

仕様書
CSS Grid Layout Module Level 2 # fr-unit

このページは MDN の貢献者によって 2025年12月31日に最終更新されました。