From fb615c08a16488e1f72311382425a1e6fff3c13b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 5 Dec 2021 01:34:05 +0900 Subject: 2021/12/05 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/box-flex/index.md | 122 +++++++++++++++++++------------------ 1 file changed, 63 insertions(+), 59 deletions(-) (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 index 618e390843..0a06c1def4 100644 --- a/files/ja/web/css/box-flex/index.md +++ b/files/ja/web/css/box-flex/index.md @@ -4,20 +4,21 @@ slug: Web/CSS/box-flex tags: - CSS - CSS プロパティ - - Non-standard - - Reference + - 標準外 + - リファレンス - box-flex + - recipe:css-property +browser-compat: css.properties.box-flex translation_of: Web/CSS/box-flex --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_Header}} -
-

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

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

CSS の -moz-box-flex および -webkit-box-flex プロパティは、 -moz-box または -webkit-box が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。

+**`-moz-box-flex`** および **`-webkit-box-flex`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 `-moz-box` または `-webkit-box` が、これを内包するボックスを、包含ボックスのレイアウトの方向で埋めるまで拡張する方法を指定します。 -
/* <number> 値 */
+```css
+/*  値 */
 -moz-box-flex: 0;
 -moz-box-flex: 2;
 -moz-box-flex: 3.5;
@@ -32,81 +33,84 @@ translation_of: Web/CSS/box-flex
 -webkit-box-flex: inherit;
 -webkit-box-flex: initial;
 -webkit-box-flex: unset;
-
+``` -
{{CSSInfo}}
+## 構文 -

構文

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

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

+## メモ -

形式文法

+包含ボックスは利用可能な空間を、中のそれぞれの要素におけるフレックス値の比率で拡張します。 -{{CSSSyntax}} +フレックス値がゼロになっている中の要素は拡張されません。 -

例

+フレックス値がゼロではない中の要素が一つしかない場合は、有効な空間を埋めるまで拡張されます。 -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>-moz-box-flex example</title>
-    <style>
+同じフレックス値を持つ中の要素は、同じ絶対量だけ拡張されます。
+
+フレックス値が要素の `flex` 属性を使用して設定された場合は、このスタイルは無視されます。
+
+包含ボックス内で同じ寸法の XUL 要素を作成するには、包含ボックスの `equalsize` 属性を `always` の値に設定してください。この属性には対応する CSS プロパティはありません。
+
+包含ボックス内のすべての中の要素を同じ寸法にするトリックとしては、すべてに対して固定の寸法 (例えば `height: 0`) と、同じゼロより大きい `box-flex` の値 (例えば `-moz-box-flex: 1`) を設定することです。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### box-flex の設定
+
+```html
+
+
+  
+    -moz-box-flex example
+    
+  
+  
+    

+      
I will expand to fill extra space

+      
I will not expand

+    

+  
+
+```
 
-
仕様書

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

+標準仕様には含まれていません。
 
-
ブラウザーの対応

+## ブラウザーの互換性
 
-
{{Compat("css.properties.box-flex")}}

+{{Compat}}
 
-
関連情報

+## 関連情報
 
-
+- {{CSSxRef("box-orient")}}
+- {{CSSxRef("box-pack")}}
+- {{CSSxRef("box-direction")}}
+- {{CSSxRef("flex")}}
-- 
cgit v1.2.3-54-g00ecf