このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
<flex>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
<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 |