非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

このプロパティは XUL ボックスモデルの部品を制御するためのものです。古い CSS Flexible Box Layout Module の草稿の 'box-flex' (このプロパティの元になったもの) または '-webkit-box-flex' (草稿の元になったもの) の動作のどちらとも一致しません。現在の標準についての情報はフレックスボックスを参照してください。

CSS-moz-box-flex および -webkit-box-flex プロパティは、 -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;

/* Global values */
-moz-box-flex: inherit;
-moz-box-flex: initial;
-moz-box-flex: unset;
-webkit-box-flex: inherit;
-webkit-box-flex: initial;
-webkit-box-flex: unset;
初期値0
適用対象elements that are direct children of an element with a CSS display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-box
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

box-flex プロパティは <number> として指定されます。値が 0 の場合、ボックスは拡張されません。値が 0 より大きい場合は、ボックスは利用可能な余白の比率で拡張されます。

形式文法

<number>

<!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>

メモ

包含ボックスは利用可能な余白を、中のそれぞれの要素におけるフレックス値の比率で拡張します。

フレックス値がゼロになっている中の要素は拡張されません。

フレックス値がゼロではない中の要素が一つしかない場合は、有効な余白を埋めるまで拡張されます。

同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。

フレックス値が要素の flex 属性を使用して設定された場合は、スタイルは無視されます。

包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの equalsize 属性を always の値に設定してください。この属性には対応する CSS プロパティはありません。

包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば height: 0) と、同じゼロより大きい box-flex の値 (例えば -moz-box-flex: 1) を設定することです。

仕様書

このプロパティは標準外の拡張です。古い CSS3 Flexbox 仕様書の草稿には box-flex プロパティが定義されていましたが、この草稿はその後で置き換えられました。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
box-flex
非推奨非標準
Chrome 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 1.1 — 3
接頭辞付き
接頭辞付き -khtml- のベンダー接頭辞が必要
WebView Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
接頭辞付き
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09
最終更新者: mdnwebdocs-bot,