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: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-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 のいずれかである要素の直接の子要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
Error: could not find syntax for this item
例
box-flex の設定
<!doctype html>
<html>
<head>
<title>-moz-box-flex example</title>
<style>
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;
}
</style>
</head>
<body>
<div class="example">
<p>I will expand to fill extra space</p>
<p>I will not expand</p>
</div>
</body>
</html>
仕様書
標準仕様には含まれていません。
ブラウザーの互換性
BCD tables only load in the browser