<flex>
<flex> は CSS のデータ型で、グリッドコンテナー内部における可変の長さを記述します。 grid-template-columns や grid-template-rows およびほかの関連プロパティで使われます。
構文
<flex> データ型は <number> のあとに単位 fr が付きます。他の CSS の数量と同様に、数値と単位の間に空白は入れません。
例
fr データ型の正しい値の例
1fr /* 整数値の使用 */
2.5fr /* 浮動小数点値の使用 */
CSS グリッドレイアウトのトラックリストでの使用例
.grid {
display: grid;
grid-template-columns: 1fr 1fr 2.5fr 1.5fr;
}
仕様書
| Specification |
|---|
| CSS Grid Layout Module Level 3 # fr-unit |
ブラウザーの互換性
BCD tables only load in the browser