From e16ef28d7ef580733a618d623768f802936fcb12 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Dec 2021 00:28:29 +0900 Subject: フレックスボックスの旧プロパティの文書を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/box-flex/index.md | 112 +++++++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/ja/web/css/box-flex/index.md (limited to 'files/ja/web/css/box-flex/index.md') diff --git a/files/ja/web/css/box-flex/index.md b/files/ja/web/css/box-flex/index.md new file mode 100644 index 0000000000..618e390843 --- /dev/null +++ b/files/ja/web/css/box-flex/index.md @@ -0,0 +1,112 @@ +--- +title: box-flex +slug: Web/CSS/box-flex +tags: + - CSS + - CSS プロパティ + - Non-standard + - Reference + - box-flex +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

このプロパティは 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;
+
+ +
{{CSSInfo}}
+ +

構文

+ +

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

+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +
<!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 プロパティが定義されていましたが、この草稿はその後で置き換えられました。

+ +

ブラウザーの対応

+ +
{{Compat("css.properties.box-flex")}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf