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-lines/index.md | 87 +++++++++++++++++++++---------------- 1 file changed, 49 insertions(+), 38 deletions(-) (limited to 'files/ja/web/css/box-lines') diff --git a/files/ja/web/css/box-lines/index.md b/files/ja/web/css/box-lines/index.md index c665a22a42..57578254f5 100644 --- a/files/ja/web/css/box-lines/index.md +++ b/files/ja/web/css/box-lines/index.md @@ -4,20 +4,20 @@ slug: Web/CSS/box-lines tags: - CSS - CSS プロパティ - - Non-standard - - Reference - 標準外 + - リファレンス + - recipe:css-property +browser-compat: css.properties.box-lines translation_of: Web/CSS/box-lines --- -
{{CSSRef}}{{Non-standard_header}}
+{{CSSRef}}{{Non-standard_header}} -
-

これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

-
+> **Warning:** これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。現在の標準についての情報は[フレックスボックス](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)を参照してください。 -

CSS の box-lines プロパティは、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。

+**`box-lines`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスの配置行 (水平方向のボックスでは行、垂直方向のボックスでは列) が単一なのか複数なのかを指定します。 -
/* キーワード値 */
+```css
+/* キーワード値 */
 box-lines: single;
 box-lines: multiple;
 
@@ -25,52 +25,63 @@ box-lines: multiple;
 box-lines: inherit;
 box-lines: initial;
 box-lines: unset;
-
+``` -

既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は box-lines プロパティを使用して変更することができます。既定値は single であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。

+既定では、水平方向のボックスは子を単一行で配置し、垂直方向のボックスは子を単一列で配置します。この動作は `box-lines` プロパティを使用して変更することができます。既定値は `single` であり、すべての要素が単一の行または列で配置され、それに合わない要素は単純にあふれさせて表示することを意味します。 -

しかし、 multiple の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。

+しかし、 `multiple` の値が指定された場合、ボックスはすべての子を収容できるように複数の配置行 (つまり、複数の行または列) に拡張することができます。ボックスはできるだけ少ない配置行数で子が収まるように、必要に応じて最小幅または高さまで縮小します。 -

水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に1つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。

+水平ボックスの中の子が最小幅まで縮小されても配置行上に収まらない場合、子は次の配置行上に 1 つずつ、残りが前の配置行に収まるまで移動されます。この手続は任意の配置行数に達するまで繰り返されます。配置行上に収まり切れない要素が1つしかない場合、要素はその配置行に留まりボックスの外にあふれます。その後の配置行は、順方向のボックスであれば前の配置行の下に、逆方向のボックスであれば上に配置されます。配置行の高さはその配置行内で最も高い子の高さになります。各配置行にある最大の要素のマージンを除いて、配置行間に余分な余白は表示されません。配置行の高さを計算するために、計算値が auto であるマージンは値が 0 として扱われます。 -

同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。

+同様の処理が垂直配置ボックスの子に対しても行われます。後の配置行は、順方向のボックスであれば前の配置行の右側に配置され、逆方向のボックスであれば前の配置行の左側に配置されます。 -

配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が 0 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。

+配置行の数が決定すると、 {{CSSxRef("box-flex")}} の計算値が `0` 以外である要素は、配置行の残りの空間を埋めるために必要なだけ引き伸ばされます。それぞれの配置行は個別に計算されるので、 {{CSSxRef("box-flex")}} と {{CSSxRef("box-flex-groups")}} を評価するときに、その配置行上の要素だけが考慮されます。配置行内の要素のまとめ方も、 {{CSSxRef("box-pack")}} プロパティで定義されている通り、それぞれの行で個別に計算されます。 -
{{CSSInfo}}
+## 構文 -

構文

+`box-lines` プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。 -

box-lines プロパティは、以下に列挙されたキーワード値のうちの一つで指定します。

+### 値 -

値

+- `single` + - : ボックスの要素は単一の行または列に配置されます。 +- `multiple` + - : ボックスの要素は複数の行または列に配置されます。 -
-
single
-
ボックスの要素は単一の行または列に配置されます。
-
multiple
-
ボックスの要素は複数の行または列に配置されます。
-
+## 公式定義 -

形式文法

+{{CSSInfo}} + +## 形式文法 {{CSSSyntax}} -

仕様書

+## 例 + +### 単純な使用法の例 + +仕様書の当初の版では、`box-lines`で、フレックスコンテナーの子を複数の行に折り返すことを指定できました。これは WebKit ベースのブラウザーのみが対応しており、接頭辞が付いていました。 + +```css +div { + display: box; + box-orient: horizontal; + box-lines: multiple; +} +``` + +現在のフレックスボックスで同等のものは [`flex-wrap`](/ja/docs/Web/CSS/flex-wrap) です。 + +## 仕様書 - +標準仕様には含まれていません。 -

ブラウザーの対応

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

関連情報

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