CSS box-flex プロパティ
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
警告:
このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の 'box-flex' (このプロパティの元になったもの) または '-webkit-box-flex' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報は フレックスボックス を参照してください。
-moz-box-flex および -webkit-box-flex は CSS のプロパティで、 -moz-box または -webkit-box が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。
構文
/* <number> 値 */
-moz-box-flex: 0;
-moz-box-flex: 2;
-moz-box-flex: 3.5;
-webkit-box-flex: 0;
-webkit-box-flex: 2;
-webkit-box-flex: 3.5;
/* グローバル値 */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: revert;
-moz-box-flex: revert-layer;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: revert;
-webkit-box-flex: revert-layer;
-webkit-box-flex: unset;
box-flex プロパティは <number> として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な空間の比率で拡張されます。
メモ
包含ボックスは利用可能な空間を、中のそれぞれの要素におけるフレックス値の比率で拡張します。
フレックス値がゼロになっている中の要素は拡張されません。
フレックス値がゼロではない中の要素が一つしかない場合は、有効な空間を埋めるまで拡張されます。
同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。
フレックス値が要素の flex 属性を使用して設定された場合は、このスタイルは無視されます。
包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの equalsize 属性を always の値に設定してください。この属性には対応する CSS プロパティはありません。
包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば height: 0) と、同じゼロより大きい box-flex の値 (例えば -moz-box-flex: 1) を設定することです。
公式定義
| 初期値 | 0 |
|---|---|
| 適用対象 | CSS の display の値が -moz-box, -moz-inline-box, -webkit-box, -webkit-inline-box のいずれかである要素の直接の子要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
box-flex =
<number>
例
box-flex の設定
<div class="example">
<p>I will expand to fill extra space</p>
<p>I will not expand</p>
</div>
div.example {
display: -moz-box;
display: -webkit-box;
border: 1px solid black;
width: 100%;
}
div.example > p:nth-child(1) {
-moz-box-flex: 1; /* Mozilla */
-webkit-box-flex: 1; /* WebKit */
border: 1px solid black;
}
div.example > p:nth-child(2) {
-moz-box-flex: 0; /* Mozilla */
-webkit-box-flex: 0; /* WebKit */
border: 1px solid black;
}
仕様書
標準仕様には含まれていません。