CSS box-flex-group プロパティ
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
警告: これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は フレックスボックス を参照してください。
box-flex-group は CSS のプロパティで、フレックスボックスの子要素をフレックスグループに割り当てます。
フレックスグループに割り当てられたフレキシブル要素の場合、最初のフレックスグループは 1 となり、それより大きい値は以降のフレックスグループを指定します。初期値は 1 です。ボックスの余白を分ける際、ブラウザーはまず最初のフレックスグループ内のすべての要素を考慮します。そのグループ内の各要素には、同じフレックスグループ内の他の要素の柔軟性に対するその要素の柔軟性の比率に基づいて余白が割り当てられます。グループ内のすべてのフレキシブル子要素の余白が最大まで増えた場合、前のフレックスグループで残った余白を使って、次のフレックスグループ内の子要素に対して同じプロセスが繰り返されます。フレックスグループがなくなり、なお余白が残っている場合、余白は box-pack プロパティに従って、コンテナボックス内で分けられます。
子要素の推奨余白を計算した後、ボックスがオーバーフローする場合は、余白を加える場合と同じ方法で、フレキシブル要素から余白が消されます。各フレックスグループが順番に調べられ、各要素の柔軟性の比率に基づいて余白が消されます。要素は最小幅より小さくはなりません。
構文
/* <integer> 値 */
box-flex-group: 1;
box-flex-group: 5;
/* グローバル値 */
box-flex-group: inherit;
box-flex-group: initial;
box-flex-group: unset;
box-flex-group プロパティは、任意の正の <integer> で指定します。
公式定義
| 初期値 | 1 |
|---|---|
| 適用対象 | フロー内のボックス要素の子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
box-flex-group =
<integer>
<integer> =
<number-token>
例
シンプルな使用例
当初のフレックスボックスの仕様書では、 box-flex-group を使用してフレックスの子を異なるグループに割り当て、自由な空間を配分できるようになっていました。
article:nth-child(1) {
-webkit-box-flex-group: 1;
}
article:nth-child(2) {
-webkit-box-flex-group: 2;
}
これは WebKit ベースのブラウザーのみが接頭辞つきで対応しましたが、仕様書のその後の版ではこれとは同等の機能ではありませんでした。代わりに、フレックスコンテナー内の空間の配分は、 flex-basis, flex-grow, flex-shrink を使用して制御するようになっています。
仕様書
どの仕様書にも含まれていません。