非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。
CSS の box-flex-group プロパティは、フレックスボックスの子要素をフレックスグループに割り当てます。
/* <integer> 値 */ box-flex-group: 1; box-flex-group: 5; /* グローバル値 */ box-flex-group: inherit; box-flex-group: initial; box-flex-group: unset;
フレックスグループに割り当てられたフレックス要素について、最初のフレックスグループは 1 であり、より高い値は下位のフレックスグループを示します。初期値は 1 です。ボックスの余白が分割されるとき、ブラウザーは最初にすべての要素が最初のフレックスグループに入ると想定します。そのグループ内のそれぞれの要素は、同じフレックスグループ内の他の要素のフレックス係数と比較した、その余蘊そのフレックス係数に基づいて余白が与えられます。グループ内のすべてのフレックスな子の余白が最大まで増加した場合は、前のフレックスグループから残っている余白を使用して、次のフレックスグループ内の子に対して処理が繰り返されます。フレックスグループがなくなり、まだ余白が残っている場合は、 box-pack プロパティに従って、追加の余白が包含ボックス内で配分されます。
推奨される子の余白が計算された後でボックスがあふれた場合は、追加の余白を追加するときに使用されるのと同様の方法で、フレックス要素からスペースが削除されます。各フレックスグループを順番に調べ、各要素のフレックス係数の比率に従ってスペースを削除します。要素は最小幅より小さくはなりません。
構文
box-flex-group プロパティは、任意の正の <integer> で指定します。
形式文法
<integer>
仕様書
- Flexible Box Layout Module (W3C Working Draft) 註: この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。
- Old Flexible Box Layout Module 註: Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。
ブラウザーの対応
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
box-flex-group | Chrome
未対応
1 — 67
| Edge 未対応 なし | Firefox 未対応 なし | IE 未対応 なし | Opera
未対応
? — 54
| Safari
完全対応
3
| WebView Android
未対応
≤37 — 67
| Chrome Android
未対応
18 — 67
| Firefox Android 未対応 なし | Opera Android
未対応
? — 48
| Safari iOS
完全対応
1
| Samsung Internet Android
未対応
1.0 — 9.0
|
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非標準。ブラウザー間の互換性が低い可能性があります。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 非推奨。新しいウェブサイトでは使用しないでください。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。