From 56128e4c267e489e08b5e7108362c6c04b35c362 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Nov 2021 02:17:02 +0900 Subject: CSS フレックスボックス関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/01 時点の英語版に同期 --- .../aligning_items_in_a_flex_container/align1.png | Bin 0 -> 5267 bytes .../aligning_items_in_a_flex_container/align10.png | Bin 0 -> 4042 bytes .../aligning_items_in_a_flex_container/align11.png | Bin 0 -> 4336 bytes .../aligning_items_in_a_flex_container/align2.png | Bin 0 -> 6969 bytes .../aligning_items_in_a_flex_container/align3.png | Bin 0 -> 7550 bytes .../aligning_items_in_a_flex_container/align4.png | Bin 0 -> 4651 bytes .../aligning_items_in_a_flex_container/align5.png | Bin 0 -> 4622 bytes .../aligning_items_in_a_flex_container/align6.png | Bin 0 -> 3862 bytes .../aligning_items_in_a_flex_container/align7.png | Bin 0 -> 2295 bytes .../aligning_items_in_a_flex_container/align8.png | Bin 0 -> 3503 bytes .../aligning_items_in_a_flex_container/align9.png | Bin 0 -> 3650 bytes .../aligning_items_in_a_flex_container/basics5.png | Bin 0 -> 3503 bytes .../aligning_items_in_a_flex_container/basics6.png | Bin 0 -> 3331 bytes .../aligning_items_in_a_flex_container/index.md | 233 +++++++--------- .../backwards_compatibility_of_flexbox/index.md | 126 ++++----- .../basic_concepts_of_flexbox/basics1.png | Bin 0 -> 1984 bytes .../basic_concepts_of_flexbox/basics2.png | Bin 0 -> 2486 bytes .../basic_concepts_of_flexbox/basics3.png | Bin 0 -> 3251 bytes .../basic_concepts_of_flexbox/basics4.png | Bin 0 -> 3240 bytes .../basic_concepts_of_flexbox/basics5.png | Bin 0 -> 3503 bytes .../basic_concepts_of_flexbox/basics6.png | Bin 0 -> 3331 bytes .../basic_concepts_of_flexbox/basics7.png | Bin 0 -> 3862 bytes .../basic_concepts_of_flexbox/index.md | 254 ++++++++--------- .../basics7.png | Bin 0 -> 3862 bytes .../index.md | 200 +++++++------- files/ja/web/css/css_flexible_box_layout/index.md | 191 ++++++------- .../mastering_wrapping_of_flex_items/index.md | 96 +++---- .../ordering_flex_items/align10.png | Bin 0 -> 4042 bytes .../ordering_flex_items/align11.png | Bin 0 -> 4336 bytes .../ordering_flex_items/align9.png | Bin 0 -> 3650 bytes .../ordering_flex_items/basics1.png | Bin 0 -> 1984 bytes .../ordering_flex_items/index.md | 152 +++++----- .../ordering_flex_items/order-rtl.png | Bin 0 -> 5038 bytes .../index.md | 136 ++++----- .../typical_use_cases_of_flexbox/index.md | 129 ++++----- .../firefox-flex-basis.png" | Bin 0 -> 17006 bytes files/ja/web/css/flex-basis/firefox-flex-basis.png | Bin 0 -> 6721 bytes files/ja/web/css/flex-basis/index.md | 144 +++++----- files/ja/web/css/flex-direction/index.md | 173 ++++++------ files/ja/web/css/flex-flow/index.md | 94 +++---- files/ja/web/css/flex-grow/index.md | 126 ++++----- files/ja/web/css/flex-shrink/index.md | 11 +- files/ja/web/css/flex-wrap/index.md | 179 ++++++------ files/ja/web/css/flex/index.md | 306 ++++++++++----------- files/ja/web/css/order/index.md | 129 ++++----- 45 files changed, 1237 insertions(+), 1442 deletions(-) create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align1.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align10.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align11.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align2.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align3.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align4.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align5.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align6.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align7.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align8.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align9.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics5.png create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics6.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png create mode 100644 files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/basics7.png create mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align10.png create mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align11.png create mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align9.png create mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/basics1.png create mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-rtl.png create mode 100644 "files/ja/web/css/flex-basis/Corel \350\207\252\345\213\225\344\277\235\346\214\201/firefox-flex-basis.png" create mode 100644 files/ja/web/css/flex-basis/firefox-flex-basis.png (limited to 'files/ja/web/css') diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align1.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align1.png new file mode 100644 index 0000000000..11544c7fdf Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align1.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align10.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align10.png new file mode 100644 index 0000000000..649a93b863 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align10.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align11.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align11.png new file mode 100644 index 0000000000..82698ad482 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align11.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align2.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align2.png new file mode 100644 index 0000000000..6b18306def Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align2.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align3.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align3.png new file mode 100644 index 0000000000..dd0d03ca00 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align3.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align4.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align4.png new file mode 100644 index 0000000000..4101fc2f36 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align4.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align5.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align5.png new file mode 100644 index 0000000000..4f6527ac15 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align5.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align6.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align6.png new file mode 100644 index 0000000000..eba412b6af Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align6.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align7.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align7.png new file mode 100644 index 0000000000..4e562a48a0 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align7.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align8.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align8.png new file mode 100644 index 0000000000..ad26082b21 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align8.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align9.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align9.png new file mode 100644 index 0000000000..a9ef5380b9 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/align9.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics5.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics5.png new file mode 100644 index 0000000000..ad26082b21 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics5.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics6.png b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics6.png new file mode 100644 index 0000000000..00fe14b399 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/basics6.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index 725f3b0e12..eeffb82d47 100644 --- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -2,222 +2,203 @@ title: フレックスコンテナー内のアイテムの配置 slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container tags: - - Align + - 配置 - CSS - Flex - - Guide + - ガイド - align-content - align-items - align-self - alignment - - flexbox + - フレックスボックス - justify - justify-content - - フレックスボックス - - 配置 translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container --- -

{{CSSRef}}

- -

フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。

+{{CSSRef}} -

ボックスを中央寄せするには、 align-items プロパティを使って交差軸 (今回の場合は縦軸) 上の位置合わせをし、 justify-content プロパティで主軸 (今回の場合は横軸) 上の位置合わせをします。

+フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。 -

中央寄せされたボックスをもつコンテナ要素

+ボックスを中央寄せするには、`align-items` プロパティを使って交差軸上 (今回の場合は縦軸上) の位置合わせをし、`justify-content` プロパティで主軸上 (今回の場合は横軸上) の位置合わせをします。 -

以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。

+![内部に中央寄せされたボックスを持つコンテナー要素](align1.png) -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。 -

配置を制御するプロパティ

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}} -

本ガイドで扱うプロパティは以下のとおりです。

+## 配置を制御するプロパティ - +本ガイドで扱うプロパティは以下のとおりです。 -

また、 auto マージンがフレックスボックスでの位置合わせにどのように使えるかについても触れます。

+- {{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御する。 +- {{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御する。 +- {{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御する +- {{cssxref("align-content")}} — 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御する。 +- {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}} — フレックスアイテム間に間隔または溝を生成するために使用する。 -
-

メモ: フレックスボックスにおける各種の配置プロパティは、そのプロパティ定義専用の仕様である CSS Box Alignment Level 3 にも記載されています。この仕様が最終的には Flexbox Level 1 仕様で定義しているプロパティの定義を置き換えることが想定されています。

-
+また、auto マージンがフレックスボックスでの位置合わせにどのように使えるかについても触れます。 -

交差軸

+## 交差軸 -

align-items プロパティと align-self プロパティは、交差軸 (cross axis: flex-direction が row のときは列に沿った、または flex-direction が column のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。

+`align-items` プロパティと `align-self` プロパティは、交差軸 (cross axis: `flex-direction` が `row` のときは列に沿った、または `flex-direction` が `column` のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。 -

もっとも単純なフレックスの例で、交差軸上の位置合わせを試してみましょう。display: flex をコンテナに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナの高さまでアイテムが伸張します。

+もっとも単純なフレックスの例で、交差軸上の位置合わせを試してみましょう。`display: flex` をコンテナーに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナーの高さまでアイテムが伸張します。 -

３つのアイテム中１つのアイテムにはほかのアイテムより高くなる要因となる追加のテキストが設定されている。

+![3 つのアイテムがあり、うち 1 つのアイテムには他よりも高くなる要因となる追加のテキストがある。](align2.png) -

３つのアイテムとも 200 ピクセルの高さをもつ

+![3つのアイテムが 200 ピクセル高に引き伸ばされている](align3.png) -

アイテムが同じ高さになるのは、交差軸での配置を制御する align-items プロパティの初期値が stretch となっているためです。

+アイテムが同じ高さになるのは、交差軸での配置を制御する `align-items` プロパティの初期値が `stretch` となっているためです。 -

アイテムの配置をコントロールするために、以下の値を使うことができます。

+アイテムの配置を制御するために、以下の値を使うことができます。 - +- `align-items: flex-start` +- `align-items: flex-end` +- `align-items: center` +- `align-items: stretch` +- `align-items: baseline` -

以下の例では、align-items の値は stretch に設定されています。他の値についても試し、flex コンテナの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。

+以下の例では、`align-items` の値は `stretch` に設定されています。他の値についても試し、フレックスコンテナーの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} -

align-self で個別のアイテムを位置合わせ

+### `align-self` で個別のアイテムを位置合わせ -

align-items プロパティはすべてのアイテムの align-self プロパティをまとめて設定します。つまり、align-self プロパティでは１つずつ個別のアイテムを対象として指定できます。align-self プロパティには、align-items プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための auto を使うことができます。

+`align-items` プロパティはすべてのアイテムの `align-self` プロパティをまとめて設定します。つまり、`align-self` プロパティでは 1 つずつ個別のアイテムを対象として指定できます。`align-self` プロパティには、`align-items` プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための `auto` を使うことができます。 -

次の例では、フレックスコンテナーには align-items: flex-start を設定していて、これはアイテムを交差軸上の始点に揃えます。first-child セレクタを使って最初のアイテムを対象として、 align-self: stretch を設定しており、また別のアイテムを selected クラスで選択して align-self: center を設定してます。 align-items の値を変更したり、個別のアイテムの align-self の値を変更して、どのように動作するかを試してみてください。

+次の例では、フレックスコンテナーには `align-items: flex-start` を設定していて、これはアイテムを交差軸上の始点に揃えます。`first-child` セレクターを使って最初のアイテムを対象として、 `align-self: stretch` を設定しており、また別のアイテムを `selected` クラスで選択して `align-self: center` を設定してます。 `align-items` の値を変更したり、個別のアイテムの `align-self` の値を変更して、どのように動作するかを試してみてください。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} -

主軸の変更

+## 主軸の変更 -

ここまでは、 flex-direction が row で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。

+ここまでは、 `flex-direction` が `row` で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。 -

３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。

+![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。垂直軸上で配置されている。](align4.png) -

flex-direction を column に変更した場合、align-items と align-self はアイテムの左右方向での位置合わせを行うようになります。

+`flex-direction` を `column` に変更した場合、`align-items` と `align-self` はアイテムの左右方向での位置合わせを行うようになります。 -

３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。水平方向の軸上で位置合わせされている。

+![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。水平軸上で配置されている。](align5.png) -

次の例では flex-direction: column を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。

+次の例では `flex-direction: column` を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} -

交差軸上の位置合わせ — align-content プロパティ

+## 交差軸上の位置合わせ — align-content プロパティ -

ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、align-content プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「フレックス行のパッキング (packing flex lines)」として説明されています。

+ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、`align-content` プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「[フレックス行のパッキング (packing flex lines)](https://drafts.csswg.org/css-flexbox/#align-content-property)」として説明されています。 -

align-content が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。

+`align-content` が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。 -

align-content プロパティには以下の値を設定できます。

+`align-content` プロパティには以下の値を設定できます。 - +- `align-content: flex-start` +- `align-content: flex-end` +- `align-content: center` +- `align-content: space-between` +- `align-content: space-around` +- `align-content: stretch` +- `align-content: space-evenly` (フレックスボックス仕様には含まれていない) -

以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 align-content の値は space-between で、この場合は残る分配可能スペース (available space) はフレックス行の間に分配され、フレックス行自体はコンテナの交差軸上の始点と終点に密着して配置されます。

+以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 `align-content` の値は `space-between` で、この場合は残る分配可能な余白 (available space) はフレックス行の*間に*分配され、フレックス行自体はコンテナーの交差軸上の始点と末尾に密着して配置されます。 -

align-content プロパティがどのように働くか、ほかの値を設定して確認してください。

+`align-content` プロパティがどのように働くか、ほかの値を設定して確認してください。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} -

列に沿った軸の時にこのプロパティの効果がどのように変わるか、flex-direction を column に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。

+列に沿った軸の時にこのプロパティの効果がどのように変わるか、`flex-direction` を `column` に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} -
-

注: space-evenly はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。

-
+> **Note:** `space-evenly` はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの対応は、フレックスボックス仕様書に定義されている他の値より遅れています。 -

上述の値についての詳細とブラウザー対応状況については MDN の justify-content のページを参照してください。

+上述の値についての詳細とブラウザーの対応状況については [MDN の `justify-content` のページ](/ja/docs/Web/CSS/justify-content)を参照してください。 -

主軸上での位置合わせ

+## 主軸上での位置合わせ -

ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは justify-content の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 justify-content では、アイテムを表示するのに必要な分よりも大きいスペースがある場合の分配可能スペースの扱いを制御できます。

+ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは `justify-content` の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 `justify-content` では、アイテムを表示するのに必要な分よりも大きい空間がある場合の分配可能な余白の扱いを制御できます。 -

コンテナに display: flex を設定した最初の例では、アイテムはコンテナの始点に一行に整列して表示されます。これは justify-content の初期値が flex-start であるためです。すべての分配可能スペースはアイテムの後ろに置かれます。

+コンテナーに `display: flex` を設定した最初の例では、アイテムはコンテナーの始点に一行に整列して表示されます。これは `justify-content` の初期値が `flex-start` であるためです。すべての分配可能な余白はアイテムの後ろに置かれます。 -

３つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナ内にある。分配可能スペースはアイテムの後ろに置かれる。

+![3 つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナー内にある。分配可能な余白はアイテムの後ろに置かれる。](align6.png) -

justify-content プロパティは align-content と同じ値を受け付けます。

+`justify-content` プロパティは `align-content` と同じ値を受け付けます。 - +- `justify-content: flex-start` +- `justify-content: flex-end` +- `justify-content: center` +- `justify-content: space-between` +- `justify-content: space-around` +- `justify-content: space-evenly` (フレックスボックス仕様書には含まれていない) -

次の例では、 justify-content の値は space-between となっています。アイテムを表示した後に余った分配可能スペースは、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と終点に揃えて並びます。

+次の例では、 `justify-content` の値は `space-between` となっています。アイテムを表示した後に余った分配可能な余白は、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と末尾に揃えて並びます。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} -

flex-direction が column に設定されて主軸がブロック方向となっているとき、justify-content はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。

+`flex-direction` が `column` に設定されて主軸がブロック方向となっているとき、`justify-content` はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} -

配置と書字方向

+## 配置と書字方向 -

上述の配置方法において、flex-start と flex-end はいずれも writing mode に対応したものとなります。justify-content の値が flex-start で、書字方向が英語のように左から右であれば、アイテムはコンテナーの左端から並べられます。

+上述の配置方法において、`flex-start` と `flex-end` はいずれも書字方向に対応したものとなります。`justify-content` の値が `start` で、書字方向が英語のような左書きであれば、アイテムはコンテナーの左端から並べられます。 -

３つのアイテムは左側に並んでいる

+![3 つのアイテムが左側に並んでいる](basics5.png) -

一方で writing mode がアラビア語のように右から左であれば、アイテムはコンテナの右端から並べられます。

+一方で書字方向がアラビア語のように右から左であれば、アイテムはコンテナーの右端から並べられます。 -

３つのアイテムは右側から並んでいる

+![3 つのアイテムは右側から並んでいる](basics6.png) -

以下の例ではフレックスアイテムを右から左に並べるために direction プロパティを rtl を設定しています。この設定を削除したり justify-content の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。

+以下の例ではフレックスアイテムを右から左に並べるために `direction` プロパティを `rtl` を設定しています。この設定を削除したり `justify-content` の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} -

配置と flex-direction

+## 配置と flex-direction -

flex-direction プロパティを変更した場合にも、始点は変わります。例えばrow の代わりに row-reverse を設定した場合などがこれにあたります。

+`flex-direction` プロパティを変更した場合にも、始点は変わります。例えば `row` の代わりに `row-reverse` を設定した場合などがこれにあたります。 -

次の例では、flex-direction: row-reverse と justify-content: flex-end を設定してアイテムをレイアウトしています。左から右の言語では、すべてのアイテムは左側に並びます。flex-direction: row-reverse の値を flex-direction: row に変更してみてください。アイテムが右側に移動することがわかります。

+次の例では、`flex-direction: row-reverse` と `justify-content: flex-end` を設定してアイテムをレイアウトしています。左書きの言語では、すべてのアイテムは左側に並びます。`flex-direction: row-reverse` の値を `flex-direction: row` に変更してみてください。アイテムが右側に移動することがわかります。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} -

こうした動作はすこし紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸・行方向の軸に沿ってフレックスアイテムが配置されます。flex-start は文の中でテキストが始まる側を示すことになります。

+こうした動作は少し紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸、行方向の軸に沿ってフレックスアイテムが配置されます。`flex-start` は文の中でテキストが始まる側を示すことになります。 -

左から始まり右で終わることを示す図

+![左から始まり右で終わることを示す図。](align8.png) -

flex-direction: column を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は flex-start は段落が始まる先頭を示すことになります。

+`flex-direction: column` を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は `flex-start` は段落が始まる先頭を示すことになります。 -

上から始まり下で終わることを示す図

+![上から始まり下で終わることを示す図](align10.png) -

flex-direction を逆方向に設定した場合、軸の終点側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。flex-start はその軸の終点側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。

+`flex-direction`を逆方向の値のいずれかに変更すると、軸の末尾側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。`flex-start` はその軸の末尾側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。 -

右から始まり左で終わることを示す図

+![右から始まり左で終わることを示す図](align9.png) -

下から始まり上で終わることを示す図

+![下から始まり上で終わることを示す図](align11.png) -

主軸上での位置合わせに auto マージンを使う

+## 主軸上での位置合わせのための auto マージンの使用 -

主軸上ではアイテムは一つのグループとして扱われるため、justify-items プロパティや justify-self プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。

+主軸上ではアイテムは一つのグループとして扱われるため、`justify-items` プロパティや `justify-self` プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。 -

よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは justify-self プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。３つのアイテムが片方にあり、もう一方に２つのアイテムがあります。もし仮に justify-self がアイテム d に対して使えたとすると、意図したものであってもそうでなくても、それに続くアイテム e の配置も変わってしまうでしょう (訳註: プロパティ名で self = 自分自身と言っているのに他のアイテムにも影響を与えてしまう)。

+よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは `justify-self` プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。3 つのアイテムが片方にあり、もう一方に 2 つのアイテムがあります。もし仮に `justify-self` をアイテム _d_ に対して使うことができたとすると、意図したものであってもそうでなくても、それに続くアイテム _e_ の配置も変わってしまうでしょう。 -

２つのグループに分かれた５つのアイテム。３つは左側にあり、２つは右側にある。

+![2 つのグループに分かれた 5 つのアイテム。3 つは左側にあり、2 つは右側にある。](align7.png) -

4 つめのアイテムに対して justify-content ではなく margin-left に auto を設定すれば、先頭の３つから分離できます。auto マージンはマージンの方向に沿ったスペースをすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央そろえするときと同じです。両側のマージンが取れるだけのスペースをとろうとするために、ブロックが中央に押し出されることになります。

+4 つめのアイテムに対して `justify-content` ではなく `margin-left` に `auto` を設定すれば、先頭の 3 つから分離できます。auto マージンはマージンの方向に沿った余白をすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央揃えするときと同じです。両側のマージンが取れるだけの余白を取ろうとするために、ブロックが中央に押し出されることになります。 -

以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、margin-left: auto を設定した push クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。

+以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、`margin-left: auto` を設定した `push` クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。 -

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}

+{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} -

フレックスボックスの配置機能の将来

+## アイテム間に間隔を作成 -

この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 align-content と justify-content プロパティに space-evenly が導入されていることも紹介しました。

+フレックスのアイテム間に間隔を作るには、{{cssxref("gap")}}、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}の各プロパティを使用します。{{cssxref("column-gap")}} プロパティは、主軸のアイテム間に間隔を作成します。{{cssxref("row-gap")}} プロパティは、{{cssxref("flex-wrap")}} が `wrap` に設定されている場合、フレックス行間に間隔を作成します。{{cssxref("gap")}} プロパティは、両方を一緒に設定する一括指定です。 -

ボックス配置モジュールは、他にも column-gap や row-gap といった、アイテムの間にスペースを作るための方法を含んでいます (CSS Grid Layout にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に column-gap や row-gap がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。

+{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}} -

フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 グリッドレイアウトでのボックス配置を参照してください。また、筆者 (訳注: 英語版の作成者 rachelandrew) は各仕様における位置合わせの動作について Box Alignment Cheatsheet で比較しています。

-

関連情報

+## 関連情報 - +- [ボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment) +- [フレックスボックスでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox) +- [グリッドレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout) diff --git a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md index a93b005b5c..fc368a0ce1 100644 --- a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md +++ b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md @@ -4,120 +4,120 @@ slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox tags: - '@supports' - CSS - - CSS Tables - - Flexible Boxes - - Floats - - Guide - - fallbacks - - feature queries - - flexbox + - CSS 表 + - フレックスボックス + - 浮動 + - ガイド + - 代替 + - 機能クエリー + - フレックスボックス - inline-block translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox --- -
{{CSSRef}}
+{{CSSRef}} -

フレックスボックスは最新のブラウザーではとてもよく対応されていますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策やフォールバックを作成するための方法を見ていきます。

+フレックスボックスは最新のブラウザーではとてもよく対応されていますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策や代替を作成するための方法を見ていきます。 -

フレックスボックスの歴史

+## フレックスボックスの歴史 -

すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。

+すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。 -

過去、フレックスボックスはいくつかのブラウザーで実験的に実装されました。その際にはベンダー接頭辞が使われました。このような接頭辞は、他の実装と衝突することなく、仕様の実装をブラウザーエンジニアやウェブ開発者がテストして調査するためのものであり、本番で使うためのものではありませんでした。しかし、結局は本番で使用され、実験的な仕様が変更されるたびに本番のサイトを修正しなければなりませんでした。

+フレックスボックスは、いくつかのウェブブラウザーに実験的に実装されていました。当時、実験的な実装を行うための方法として、ベンダー接頭辞を使用していました。この接頭辞の考え方は、他の実装と衝突することなく、ブラウザのエンジニアやウェブ開発者が仕様の実装をテストし、検討できるようにすることでした。実験的に実装されたものを本番コードで使用することはないという考えでした。しかし、最終的には本番コードでも接頭辞が使用されるようになり、実験的な仕様の変更に伴い、サイトを更新する必要が出てきました。 -

2009 年の仕様は、今とはだいぶ異なります。フレックスコンテナーの生成するには display: box を使い、数々の box-* プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。

+[2009 年の仕様](https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)は、今とはだいぶ異なります。フレックスコンテナーの生成するには `display: box` を使い、数々の `box-*` プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。 -

仕様変更によって構文が display: flexbox へと変わりました。これもベンダー接頭辞つきでした。

+[仕様変更](https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/)によって構文が `display: flexbox` へと変わりました。これもベンダー接頭辞つきでした。 -

最終的には、フレックスコンテナーの作成には display: flex を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。

+最終的には、フレックスコンテナーの作成には `display: flex` を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。 -

古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 display: box や display: flexbox ならば、それは古い情報です。

+古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 `display: box` や `display: flexbox` ならば、それは古い情報です。 -

ブラウザーの状況

+## ブラウザーの状況 -

フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。ただし、下記の 2 つのブラウザーでは、ブラウザー間の互換性にまだ注意が必要です。

+フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。ただし、下記の 2 つのブラウザーでは、ブラウザー間の互換性にまだ注意が必要です。 - +- Internet Explorer 10。`display: flexbox` の仕様で実装されていて、`-ms-` の接頭辞が必要です。 +- UC Browser。2009 年の `display: box` の仕様のままで、`-webkit-` の接頭辞が必要です。 -

また、Internet Explorer 11 は最新の display: flex の仕様に対応していますが、その実装に多くのバグがあることにも注意してください。

+また、Internet Explorer 11 は最新の `display: flex` の仕様に対応していますが、その実装に多くのバグがあることにも注意してください。 -

よくある問題

+## よくある問題 -

フレックスボックスの問題の大部分は、開発中だった頃の仕様の変更や、実験段階の仕様を本番で使おうとすることに関連しています。IE10 や IE11 のような古いブラウザーへの後方互換性を確保したいなら、Flexbugs のサイトが役に立ちます。そこで挙げられているバグの多くが古いバージョンのブラウザーのものであり、現行のバージョンでは解決していることが分かると思います。バグにはそれぞれ回避策が示されているので、長い試行錯誤から救ってくれることでしょう。

+フレックスボックスに関する問題の大半は、開発中だった頃の仕様変更や、実験段階の仕様を本番で使おうとすることに関連しています。古いバージョンのブラウザー (特に IE10 と 11) との下位互換性を確保しようとしている場合は、[Flexbugs](https://github.com/philipwalton/flexbugs) のサイトが参考になります。掲載されているバグの多くは、古いブラウザーのバージョンに適用され、現行のブラウザーでは修正されていることがわかります。それぞれのバグには回避策が記載されているので、何時間も悩む必要はありません。 -

非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。

+非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。 -
.wrapper {
+```css
+.wrapper {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-}
+} +``` -

Autoprefixer Online は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、Can I Use では、ブラウザーで接頭辞が削除された時期を調べることができます。

+[Autoprefixer Online](https://autoprefixer.github.io/) は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、[Can I Use](https://caniuse.com/#feat=flexbox) では、ブラウザーで接頭辞が削除された時期を調べることができます。 -

有用なフォールバック方法

+## 有用な代替方法 -

フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることでフォールバックとすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。

+フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることで代替とすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。 -

浮動アイテム

+### 浮動アイテム -
-

「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - 3. Flex Containers

-
+> 「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - [3. Flex Containers](https://www.w3.org/TR/css-flexbox-1/#flex-containers) -

下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナに display: flex を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。

+下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナーに `display: flex` を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。 -

フォールバックの挙動を試すには、ラッパーから display: flex を削除してください。

+代替の挙動を試すには、ラッパーから `display: flex` を削除してください。 -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}} -

display: inline-block

+### display: inline-block -

inline-block のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に空白が保持されるような display: inline-block の効果が現れなくなります。

+`inline-block` のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に余白が保持されるような `display: inline-block` の効果が現れなくなります。 -

display: flex を削除してフォールバックの挙動を確認してください。アイテム間に空白が追加されるはずです。これはインライン要素や display: inine-block を指定した要素の挙動と同じです。

+`display: flex` を削除して代替の挙動を確認してください。アイテム間に余白が追加されるはずです。これはインライン要素や `display: inine-block` を指定した要素の挙動と同じです。 -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}} -

display: table-

+### display: table- -

CSS のテーブル表示のプロパティは、フォールバックとしてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばすことや、縦方向の中央揃えなどのデザインパターンが可能であり、しかもそれが Internet Explorer 8 のような古いブラウザーでも動作するからです。

+CSS のテーブル表示のプロパティは、代替としてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばしたり、縦方向に中央揃えするなどのデザインパターンが可能であり、しかもそれが Internet Explorer 8 のような古いブラウザーでも動作するからです。 -

アイテムに display: table-cell を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS は 2 種類の無名のボックスを作ります。ひとつは <tr> の、もうひとつは <table> の役割を果たします。このおかげで、アイテムを実際の HTML 要素で包む必要はありません。これら無名ボックスは不可視でスタイルを指定することもできません。単にツリー構造を補うためのものなのです。

+アイテムに `display: table-cell` を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS では、これらの項目を表す無名のボックスを作成し、各項目を HTML のテーブルの行を表すラッパーとテーブル要素自体を表すラッパーで包む必要がないようにしています。これらの無名のボックスは、見ることもできないし、スタイルを決めることもできません。単にツリー構造を補うためのものなのです。 -

親要素に display: flex を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。

+親要素に `display: flex` を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナーの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。 -
-

「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - 4. Flex Items

-
+> 「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - [4. Flex Items](https://www.w3.org/TR/css-flexbox-1/#flex-items) -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}} -

vertical-align プロパティ

+### vertical-align プロパティ -

下記のライブサンプルでは、display: inline-block の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、display: table-cell と display: inline-block のどちらにも指定できます。vertical-align による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスには無視されるので、フォールバックとして display: table-cell や display: inline-block とともに使用できます。それによってフレックスボックスの整列系のプロパティが悪影響を受けることはありません。

+下記のライブサンプルでは、`display: inline-block` の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、`display: table-cell` と `display: inline-block` のどちらにも指定できます。`vertical-align` による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスでは無視されるので、代替として `display: table-cell` や `display: inline-block` とともに使用できます。それによってフレックスボックスの配置プロパティが悪影響を受けることはありません。 -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}} -

機能クエリとフレックスボックス

+## 機能クエリーとフレックスボックス -

下記のように、フレックスボックスに対応しているかどうかを機能クエリで検査できます。

+下記のように、フレックスボックスに対応しているかどうかを[機能クエリー](/ja/docs/Web/CSS/@supports)で検査できます。 -
@supports (display: flex) {
+```css
+@supports (display: flex) {
   // 対応しているブラウザー向けのコード
-}
+} +``` -

Internet Explorer 11 は機能クエリに対応していませんが、フレックスボックスには対応していることに注意してください。IE11 のフレックスボックスの実装にはバグが多いため、フォールバックを採用することもあるでしょう。その場合は機能クエリを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリは UC Browser を含みます。UC Browser は機能クエリと接頭辞付きの古い構文に対応しています。

+Internet Explorer 11 は機能クエリーに対応していませんが、フレックスボックスには対応していることに注意してください。IE11 のフレックスボックスの実装にはバグが多いため、代替を採用することもあるでしょう。その場合は機能クエリーを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリーにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリーは UC Browser を含みます。UC Browser は機能クエリーと接頭辞付きの古い構文に対応しています。 -
@supports (display: flex) or (display: -webkit-box) {
+```css
+@supports (display: flex) or (display: -webkit-box) {
   // 対応しているブラウザー向けのコード
-}
+} +``` -

機能クエリについて詳しく知りたい場合は、Mozilla Hacks ブログの Using Feature Queries in CSS をご覧ください。

+機能クエリーについて詳しく知りたい場合は、Mozilla Hacks ブログの [Using Feature Queries in CSS](https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/) をご覧ください。 -

終わりに

+## 終わりに -

このガイドで潜在的な問題やフォールバックについて学んだことで、フレックスボックスを本番で使う準備が整いました。このガイドは、問題に遭遇した場合、または古いブラウザーに対応する必要がある場合に役立ちます。

+このガイドでは、潜在的な問題や代替について説明してきましたが、フレックスボックスはすぐにでも本番で使用できる状態になっています。このガイドは、問題が発生した場合や古いブラウザーに対応する必要がある場合に役立ちます。 diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png new file mode 100644 index 0000000000..d5a5f920a4 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics1.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png new file mode 100644 index 0000000000..73793d400b Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics2.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png new file mode 100644 index 0000000000..69f19c1a19 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics3.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png new file mode 100644 index 0000000000..a2cf5f3f5c Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics4.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png new file mode 100644 index 0000000000..ad26082b21 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics5.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png new file mode 100644 index 0000000000..00fe14b399 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics6.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png new file mode 100644 index 0000000000..eba412b6af Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/basics7.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md index d73d12b7d4..4b06ff6d80 100644 --- a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -4,234 +4,220 @@ slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox tags: - CSS - Flex - - Guide + - ガイド - axes - - concepts - - container - - flexbox + - 概念 + - コンテナー + - フレックスボックス translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox --- -
{{CSSRef}}
+{{CSSRef}} -

通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間でスペースの分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。

+通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。 -

フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは CSS グリッドレイアウトが行と列の二次元を同時に制御するモデルであることと対照的です。

+フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)が行と列の二次元を同時に制御するモデルであることと対照的です。 -

フレックスボックス 2 つの軸

+## フレックスボックス 2 つの軸 -

フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作ではつねにこの軸について参照することになるので、最初にその動きを理解しましょう。

+フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作では常にこの軸について参照することになるので、最初にその動きを理解しましょう。 -

主軸

+### 主軸 -

主軸は flex-direction によって定義され、4 種類の値をとることができます。

+主軸は `flex-direction` によって定義され、4 種類の値をとることができます。 - +- `row` +- `row-reverse` +- `column` +- `column-reverse` -

row または row-reverse を選択した場合、主軸はインライン要素の並ぶ方向に伸びる軸となります。

+`row` または `row-reverse` を選択した場合、主軸は**インライン要素の並ぶ方向**に伸びる軸となります。 -

flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。

+![flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。](basics1.png) -

column または column-reverse を選んだ場合は、ページの上から下に向かってブロック要素の並ぶ方向に伸びる軸となります。

+`column` または `column-reverse` を選んだ場合は、ページの上から下に向かって**ブロック要素の並ぶ方向**に伸びる軸となります。 -

flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。

+![flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。](basics2.png) -

交差軸

+### 交差軸 -

交差軸は主軸に垂直に交わる軸です。したがって、flex-direction (主軸) が row または row-reverse なら、交差軸は列に沿ったものになります。

+交差軸は主軸に垂直に交わる軸です。したがって、`flex-direction` (主軸) が `row` または `row-reverse` なら、交差軸は列に沿ったものになります。 -

flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。

+![flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。](basics3.png) -

主軸が column または column-reverse であれば、交差軸は行の方向になります。

+主軸が `column` または `column-reverse` であれば、交差軸は行の方向になります。 -

flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。

+![flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。](basics4.png) -

フレックスアイテムの整列と位置合わせを検討する際には、どの軸が重要なのかを理解することが重要です。フレックスボックスには、コンテンツを一方の軸または他方の軸に沿って揃えたり、位置合わせしたりするプロパティが用意されています。

+フレックスアイテムの整列と位置合わせを検討する際には、どの軸が重要なのかを理解することが重要です。フレックスボックスには、コンテンツを一方の軸または他方の軸に沿って揃えたり、位置合わせしたりするプロパティが用意されています。 -

行の先頭と末尾

+## 行の先頭と末尾 -

理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。

+理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。 -

フレックスボックスと書字方向の仕様の関係については、後に別の記事でくわしく触れますが、ここではフレックスアイテムを流し込む方向について、上下左右という言葉を使わない理由について説明します。

+後述する[フレックスボックスと他のレイアウト方法の関係を読む](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods#writing_modes)こともできますが、フレックスアイテムが流れる方向を説明するときに、左右や上下の話をしない理由は、以下の説明で理解できると思います。 -

もし flex-direction が row で言語が英語の場合、主軸の先頭は左で末尾は右になります。

+もし `flex-direction` が `row` で言語が英語の場合、主軸の先頭は左で末尾は右になります。 -

英語の場合、先頭は左

+![英語の場合、先頭がわは左になります。](basics5.png) -

一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。

+一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。 -

右から左に書く言語では、先頭は右

+![右書きの言語では、先頭側は右になります。](basics6.png) -

いずれの場合でも、両言語ともに書字方向が横書きであるため、交差軸の先頭側は上で末尾側が下になります。

+両言語ともに書字方向が横書きであるため、いずれの場合でも、交差軸の先頭側は上で末尾側が下になります。 -

こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。

+こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。 -

フレックスコンテナー

+## フレックスコンテナー -

フレックスボックスを使ってレイアウトされる文書の領域は、フレックスコンテナーと呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を flex もしくは inline-flex に設定します。またこれにより、このコンテナー直下の子要素が フレックスアイテムとなります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。

+フレックスボックスを使ってレイアウトされる文書の領域は、**フレックスコンテナー**と呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を `flex` もしくは `inline-flex` に設定します。またこれにより、このコンテナー直下の子要素が**フレックスアイテム**となります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。 - +- フレックスアイテムは行に沿って並んで表示されます (`flex-direction` プロパティの既定値は `row`)。 +- フレックスアイテムは主軸の先頭側を先頭に並びます。 +- フレックスアイテムは、主軸方向に伸張されませんが、収縮する場合があります。 +- フレックスアイテムは、交差軸の大きさを埋めるように伸張されます。 +- {{cssxref("flex-basis")}} プロパティは `auto` に設定されます。 +- {{cssxref("flex-wrap")}} プロパティは `nowrap` に設定されます。 -

その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより大きい場合には、すべてのアイテムが交差軸方向にその全高を埋めるように伸張されます。

+その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより大きい場合には、すべてのアイテムが交差軸方向にその全高を埋めるように伸張されます。 -

この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。

+この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。 -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} -

flex-direction の変更

+### flex-direction の変更 -

フレックスコンテナーに {{cssxref("flex-direction")}} プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 flex-direction: row-reverse と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。

+フレックスコンテナーに {{cssxref("flex-direction")}} プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 `flex-direction: row-reverse` と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。 -

flex-direction を column に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 column-reverse では、さらに先頭と末尾が入れ替わります。

+`flex-direction` を `column` に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 `column-reverse` では、さらに先頭と末尾が入れ替わります。 -

次の例では、flex-direction が row-reverse に設定されています。他の値である row, column, cokumn-reverse で何が起こるか確かめてみてください。

+次の例では、`flex-direction` が `row-reverse` に設定されています。他の値である `row`, `column`, `cokumn-reverse` で何が起こるか確かめてみてください。 -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}} -

flex-wrap による複数行のフレックスコンテナー

+## flex-wrap による複数行のフレックスコンテナー -

フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。スペースの分配はその行の中でのみ発生し、隣の行については参照されません。

+フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。余白の分配はその行の中でのみ発生し、隣の行については参照されません。 -

折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として wrap を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返しされます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるような幅をアイテムに設定しています。 flex-wrap を wrap に設定すると、アイテムが折り返します。初期値である nowrap に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 nowrap はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。

+折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として `wrap` を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返しされます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるような幅をアイテムに設定しています。 `flex-wrap` を `wrap` に設定すると、アイテムが折り返します。初期値である `nowrap` に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 `nowrap` はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。 -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}} -

フレックスアイテムの折り返しについての詳細は、フレックスアイテムの折り返しのマスターを参照してください。

+フレックスアイテムの折り返しについての詳細は、[フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items)を参照してください。 -

flex-flow 一括指定プロパティ

+## flex-flow 一括指定プロパティ -

flex-direction と flex-wrap の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が flex-direction で、2 つ目の値が flex-wrap です。

+`flex-direction` と `flex-wrap` の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が `flex-direction` で、2 つ目の値が `flex-wrap` です。 -

以下の例で、1 つ目の値を flex-direction に使える値 (row, row-reverse, column, column-reverse のいずれか) に変更してみてください。また、2 つ目の値を wrap か nowrap に変更してみてください。

+以下の例で、1 つ目の値を `flex-direction` に使える値 (`row`, `row-reverse`, `column`, `column-reverse` のいずれか) に変更してみてください。また、2 つ目の値を `wrap` か `nowrap` に変更してみてください。 -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}} -

フレックスアイテムに適用されるプロパティ

+## フレックスアイテムに適用されるプロパティ -

フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。

+フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。 - +- {{cssxref("flex-grow")}} +- {{cssxref("flex-shrink")}} +- {{cssxref("flex-basis")}} -

本ページでは、これらのプロパティについて簡単に触れます。主軸におけるフレックスアイテムの比率の制御のガイドで、より完全な情報を得られます。

+本ページでは、これらのプロパティについて簡単に触れます。[主軸におけるフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)のガイドで、より完全な情報を得られます。 -

上述のプロパティについて理解する前に、分配可能スペース (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能スペースの分配のしかたを変えるということです。この分配可能スペースについての考え方は、アイテムの位置合わせについて考える時に重要になります。

+上述のプロパティについて理解する前に、**分配可能な余白** (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能な余白の分配のしかたを変えるということです。この分配可能な余白についての考え方は、アイテムの位置合わせについて考える時に重要になります。 -

たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能スペースが残っています。初期値を変更しなかった場合フレックスボックスは、スペースを最後のアイテムの後ろに配置します。

+たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能な余白が残っています。初期値を変更しなかった場合フレックスボックスは、余白を最後のアイテムの後ろに配置します。 -

このフレックスコンテナーは、アイテムを配置した後に分配可能スペースがある。

+![このフレックスコンテナーは、アイテムを配置した後に分配可能な余白があります。](basics7.png) -

そうではなく、アイテムを拡大してスペースを埋めたいときには、余っているスペースをアイテムに分配する方法が必要となります。それがアイテム自体に設定する flex プロパティが提供する機能です。

+そうではなく、アイテムを拡大して余白を埋めたいときには、余っている余白をアイテムに分配する方法が必要となります。それがアイテム自体に設定する `flex` プロパティが提供する機能です。 -

flex-basis プロパティ

+### flex-basis プロパティ -

flex-basis は、そのアイテムの寸法を、使用しないスペースは分配可能スペースとして残すように定義します。このプロパティの初期値は auto で、この設定ではブラウザーはアイテムにサイズが設定されているかを確認します。上述の例では、すべてのアイテムが100ピクセルの幅に設定されているため、これが flex-basis として使われます。

+`flex-basis` は、そのアイテムの寸法を、使用しない余白は分配可能な余白として残すように定義します。このプロパティの初期値は `auto` で、この設定ではブラウザーはアイテムに寸法が設定されているかを確認します。上述の例では、すべてのアイテムが 100 ピクセルの幅に設定されているため、これが `flex-basis` として使われます。 -

アイテムにサイズが設定されていない場合は、その内容のサイズが flex-basis として使われます。display: flex を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要なスペースのみを使用して行の中に整列していたのは、この挙動のためです。

+アイテムに寸法が設定されていない場合は、その内容の大きさが `flex-basis` として使われます。`display: flex` を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要な余白のみを使用して行の中に整列していたのは、この挙動のためです。 -

flex-grow プロパティ

+### flex-grow プロパティ -

flex-grow プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って flex-basis 以上に伸張することができます。これによって、アイテムが主軸に沿った分配可能スペースをすべて使うまで伸張するか、ほかのアイテムにも flex-grow が設定されていたときには一定の割合を使うように伸張するようになります。

+`flex-grow` プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って `flex-basis` 以上に伸張することができます。これによって、アイテムが主軸に沿った分配可能な余白をすべて使うまで伸張するか、ほかのアイテムにも `flex-grow` が設定されていたときには一定の割合を使うように伸張するようになります。 -

先ほどの例で、すべてのアイテムの flex-grow に 1 を設定すると、分配可能スペースはアイテム間で均等に分配され、主軸に沿ってコンテナーを埋めるように伸張されます。

+先ほどの例で、すべてのアイテムの `flex-grow` に 1 を設定すると、分配可能な余白はアイテム間で均等に分配され、主軸に沿ってコンテナーを埋めるように伸張されます。 -

flex-grow プロパティは割合で余白を配分するために使うことができます。最初のアイテムの flex-grow に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに2/4 (先ほどの例では 200px 中の 100px ) が与えられ、残りの 2 つのアイテムに 1/4 (200px 中の 50px ) ずつが与えられます。

+flex-grow プロパティは割合で余白を分配するために使うことができます。最初のアイテムの `flex-grow` に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに2/4 (先ほどの例では 200px 中の 100px ) が与えられ、残りの 2 つのアイテムに 1/4 (200px 中の 50px ) ずつが与えられます。 -

flex-shrink プロパティ

+### flex-shrink プロパティ -

flex-grow プロパティが主軸上のスペースの追加を扱う一方で、flex-shrink はスペースの取りあげ方をコントロールします。 アイテムを配置するのに十分なスペースがコンテナーになく、flex-shrink に正の整数が設定されていれば、アイテムは flex-basis よりも小さくなります。flex-grow と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまりより大きな値が flex-shrink に設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも速く収縮します。

+`flex-grow` プロパティが主軸上の余白の追加を扱う一方で、`flex-shrink` は余白の取りあげ方をコントロールします。 アイテムを配置するのに十分な余白がコンテナーになく、`flex-shrink` に正の整数が設定されていれば、アイテムは `flex-basis` よりも小さくなります。`flex-grow` と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまり `flex-shrink` により大きな値が設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも早く収縮します。 -

実際の収縮幅の計算にはアイテムの最小サイズが考慮されるため、flex-shrink の動作は flex-grow に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、主軸に沿ったフレックスアイテムの比率の制御 の記事に書かれています。

+実際の収縮幅の計算にはアイテムの最小寸法が考慮されるため、`flex-shrink` の動作は `flex-grow` に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、[主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)の記事に書かれています。 -
-

注意: flex-grow や flex-shrink に指定する値は割合です。一般的には、たとえばあるアイテムを他の flex: 1 1 200px に設定したアイテムより２倍速く拡大させたいときには、flex: 2 1 200px を設定します。しかし、望むならば flex: 10 1 200px と flex: 20 1 200px という書き方もできます。

-
+> **Note:** `flex-grow` や `flex-shrink` に指定する値は割合です。一般的には、たとえばあるアイテムを他の `flex: 1 1 200px` に設定したアイテムより２倍速く拡大させたいときには、`flex: 2 1 200px` を設定します。しかし、望むならば `flex: 10 1 200px` と `flex: 20 1 200px` という書き方もできます。 -

flex プロパティの一括指定

+### flex プロパティの一括指定の値 -

flex-grow、flex-shrink、flex-basis の各プロパティを個別に使うケースはとても珍しく、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。flex 一括指定プロパティは、flex-grow、flex-shrink、flex-basis の順に３つの値を設定できます。

+`flex-grow`、`flex-shrink`、`flex-basis` の各プロパティを個別に使うケースは稀であり、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。`flex` 一括指定プロパティは、`flex-grow`、`flex-shrink`、`flex-basis` の順に 3 つの値を設定することができます。 -

以下の例では、flex 一括指定プロパティの様々な値を試せるようになっています。 最初の値が flex-grow であり、正の値を指定することでアイテムが伸張できるようになります。２番目の値は flex-shrink です。正の値によりアイテムが収縮できるようになりますが、アイテムの合計サイズが主軸からはみ出す場合のみ起こります。最後の値が flex-basis となり、アイテムが伸張・収縮する際の基準値となります。

+以下の例では、`flex` 一括指定プロパティの様々な値を試せるようになっています。 最初の値が `flex-grow` であり、正の値を指定することでアイテムが伸張できるようになります。2 番目の値は `flex-shrink` です。正の値によりアイテムが収縮できるようになりますが、アイテムの合計寸法が主軸からはみ出す場合のみ起こります。最後の値が `flex-basis` となり、アイテムが伸張・収縮する際の基準値となります。 -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}} -

また、ほとんどのユースケースをカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。

+また、ほとんどの用途をカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。 - +- `flex: initial` +- `flex: auto` +- `flex: none` +- `flex: <正の数>` -

flex: initial はフレックスボックスの初期値にリセットします。これは flex: 0 1 auto に設定することと同じです。この場合 flex-grow は 0 となるため、アイテムが flex-basis よりも大きくなることはありません。flex-shrink は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。flex-basis の値は auto です。アイテムに設定されている主軸に沿ったサイズか、またはアイテムの内容のサイズがフレックスアイテムのサイズとして使用されます。

+`flex: initial` はフレックスボックスの初期値にリセットします。これは `flex: 0 1 auto` に設定することと同じです。この場合 `flex-grow` は 0 となるため、アイテムが `flex-basis` よりも大きくなることはありません。`flex-shrink` は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。`flex-basis` の値は `auto` です。アイテムに設定されている主軸に沿った寸法か、またはアイテムの内容の寸法がフレックスアイテムの寸法として使用されます。 -

flex: auto では、flex: 1 1 auto に設定することと等しくなります。flex: initial とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。

+`flex: auto` では、`flex: 1 1 auto` に設定することと等しくなります。`flex: initial` とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。 -

flex: none は、全く伸縮性の無い flex アイテムを作成します。これは flex: 0 0 auto と同じです。アイテムは伸張も収縮もせずに、flex-basis: auto のフレックスボックスとして配置されます。

+`flex: none` は、全く伸縮性のない flex アイテムを作成します。これは `flex: 0 0 auto `と同じです。アイテムは伸張も収縮もせずに、`flex-basis: auto` のフレックスボックスとして配置されます。 -

チュートリアル内では、flex: 1 や flex: 2 のような設定をよく目にするでしょう。これは flex: 1 1 0 を使うのと同様、flex-basis が 0 の状態から伸び縮みします。

+チュートリアル内では、`flex: 1` や `flex: 2` のような設定をよく目にするでしょう。これは `flex: 1 1 0` を使うのと同様、`flex-basis` が 0 の状態から伸び縮みします。 -

これらの短縮値について、以下の例でためしてみてください。

+これらの一括指定値について、以下の例で試してみてください。 -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}} -

アイテム間での位置合わせ、端揃え、スペース分配

+## アイテム間での位置合わせ、端揃え、余白分配 -

フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間でのスペースの分配ができる点にあります。

+フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間での余白の分配ができる点にあります。 -

align-items

+### align-items -

{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。

+{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。 -

このプロパティの初期値は stretch であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。

+このプロパティの初期値は `stretch` であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。 -

アイテムをフレックスコンテナーの先頭側に揃えるためには align-items に flex-start を設定し、末尾側に揃えるためには flex-end を、中央揃えにするには center を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。align-items に以下の値を設定したときにそれぞれ何が起こるか確認してください。

+アイテムをフレックスコンテナーの先頭側に揃えるためには `align-items` に `flex-start` を設定し、末尾側に揃えるためには `flex-end` を、中央揃えにするには `center` を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。`align-items` に以下の値を設定したときにそれぞれ何が起こるか確認してください。 - +- `stretch` +- `flex-start` +- `flex-end` +- `center` -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}} -

justify-content

+### justify-content -

{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり flex-direction で設定された方向における位置合わせを行います。初期値は flex-start で、コンテナーの先頭側からアイテムが並べられます。flex-end を設定することで末尾から、center を設定することで中央に並べることもできます。

+{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり `flex-direction` で設定された方向における位置合わせを行います。初期値は `flex-start` で、コンテナーの先頭側からアイテムが並べられます。`flex-end` を設定することで末尾から、`center` を設定することで中央に並べることもできます。 -

また、space-between を使用して、アイテムを配置したあとの残りのスペースのすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけのスペースを空けるには、space-around を使用します。space-around では、コンテナーの両端には、アイテム間の半分のサイズのスペースが設けられます。両端にも同じだけのスペースを設けるには、space-evenly を使用します。この場合はコンテナの両端にフルサイズ (アイテム間と同じサイズ) のスペースが設けられます。

+また、`space-between` を使用して、アイテムを配置したあとの残りの余白のすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけの余白を空けるには、`space-around` を使用します。`space-around` では、コンテナーの両端には、アイテムの間隔の半分の大きさの余白が設けられます。両端にも同じだけの余白を設けるには、`space-evenly` を使用します。この場合はコンテナの両端にフルサイズ (アイテムの間隔と同じ大きさ) の余白が設けられます。 -

例で、以下の justify-content の値を試してみましょう。

+例で、以下の `justify-content` の値を試してみましょう。 - +- `flex-start` +- `flex-end` +- `center` +- `space-around` +- `space-between` +- `space-evenly` -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}} -

フレックスコンテナー内でのアイテムの配置の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどのユースケースで役に立つでしょう。

+[フレックスコンテナー内でのアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどの用途で役に立つでしょう。 -

次のステップ

+## 次のステップ -

この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事ではこの仕様が他の CSS レイアウトメソッドとどのような関係にあるかを見ていきます。

+この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事では[この仕様が他の CSS レイアウトメソッドとどのような関係にあるか](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods)を見ていきます。 diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/basics7.png b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/basics7.png new file mode 100644 index 0000000000..eba412b6af Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/basics7.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md index 379eb2ab8d..cd32c3cd83 100644 --- a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md +++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md @@ -6,8 +6,8 @@ tags: - Basis - CSS - Flex - - Guide - - flexbox + - ガイド + - フレックスボックス - free space - grow - max-content @@ -17,188 +17,180 @@ tags: translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax --- -
{{CSSRef}}
+{{CSSRef}} -

このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティを見ていきます。 — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} です。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。

+このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティ — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} を見ていきます。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。 -

最初に見てみる

+## 最初に見てみる -

三つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。

+3 つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。 - +- `flex-grow`: このアイテムが得る正の自由空間はどれくらいか。 +- `flex-shrink`: このアイテムから縮小できる負の自由空間はどれくらいか。 +- `flex-basis`: 伸長や縮小が発生する前のアイテムの寸法はいくつか。 -

プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは flex-grow プロパティを 2 に、 flex-shrink を 1 に、 flex-basis を auto に設定します。

+プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは `flex-grow` プロパティを `2` に、 `flex-shrink` を `1` に、 `flex-basis` を `auto` に設定します。 -
.item {
+```css
+.item {
   flex: 2 1 auto;
-}
+} +``` -

すでにフレックスボックスの基本概念の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。

+すでに[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。 -

主軸に合わせて動作する重要概念

+## 主軸に合わせて動作する重要概念 -

There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the natural size of flex items before any growing or shrinking takes place, and to the concept of free space.

+主軸に沿った比率を制御するためのフレックスプロパティの機能を見る前に、いくつかの概念を確認しておきましょう。これらは、フレックスアイテムの成長や縮小が起こる前の*自然な*寸法と、自由空間の概念に関連しています。 -

フレックスアイテムの寸法の変更

+### フレックスアイテムの寸法の変更 -

In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?

+フレックスアイテムをレイアウトするための空間を確保するには、まずアイテムの大きさをブラウザーが知る必要があります。絶対的な長さの単位で適用される幅や高さを持たないアイテムは、どのようにして処理されるのでしょうか。 -

There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are defined in the CSS Intrinsic and Extrinsic Sizing Specification, and can be used in place of a length unit.

+CSS には {{CSSxRef('width','min-content','#min-content')}} と {{CSSxRef('width','max-content','#max-content')}} という概念があります。これらのキーワードは [CSS Intrinsic and Extrinsic Sizing 仕様書で定義](https://drafts.csswg.org/css-sizing-3/#width-height-keywords)されており、[長さの単位](/ja/docs/Web/CSS/length)の代わりに使用することができます。 -

In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of min-content. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the min-content size of that string. Essentially, the longest word in the string is dictating the size.

+例えば、以下のライブ例では、テキストの文字列を含む 2 つの段落要素があります。1 つ目の段落の幅は `min-content` となっています。このキーワードに対応しているブラウザーでは、テキストのソフトな折り返しの機会をすべて利用して、はみ出さない範囲で小さくなっているのがわかるはずです。これが、その文字列の最小コンテンツサイズです。基本的には、文字列の中で最も長い単語が大きさを決定します。 -

The second paragraph has a value of max-content and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.

+2 つ目の段落は、`max-content` という値を持っているので、逆のことをしています。これは可能な限り大きくして、ソフトな折り返しの機会を与えません。コンテナーが狭すぎるとボックスからあふれてしまいます。 -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}

+{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}} -

If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.

+お使いのブラウザーがこれらのキーワードにまだ対応していない場合、両方の段落はブロックフローの通常の段落としてレンダリングされます。以下のスクリーンショットは期待されるレンダリングを示しています。 -

The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow.

+![第 1 段落は最も長い単語で折り返されており、第 2 段落はあふれ出すように引き伸ばされています。](ratios-size.png) -

Remember this behaviour and what effects min-content and max-content have as we explore flex-grow and flex-shrink later in this article.

+この動作と、`min-content` および `max-content` がどのような効果を持つかについては、後述の `flex-grow` と `flex-shrink` の説明で覚えておいてください。 -

正と負のフリースペース

+### 正と負の自由空間 -

To talk about these properties we need to understand the concept of positive and negative free space. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is row, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.

+これらの特性を説明するには、**正と負の自由空間**の概念を理解する必要があります。フレックスコンテナーに正の自由空間がある場合は、コンテナー内にフレックスアイテムを表示するのに必要な空間よりも大きな空間があるということです。たとえば 幅が 500 ピクセルのコンテナーで、{{CSSxRef("flex-direction")}} が `row` であり、幅 100 ピクセルのフレックスアイテムが 3 つあった場合、正の自由空間が 200 ピクセルあり、コンテナーいっぱいに表示したい場合は、各アイテムに分配することができます。 -

Image showing space left over after items have been displayed.

+![アイテムを配置した後で空間が残っていることを表す画像です。](basics7.png) -

We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.

+アイテムの自然な大きさの合計が、フレックスコンテナー内の利用可能な空間よりも大きい場合、負の自由空間が発生します。上の図のように幅 500 ピクセルのコンテナーがあるものの、3 つのフレックスアイテムの幅がそれぞれ 200 ピクセルであった場合、必要な空間は合計で 600 ピクセルとなり、100 ピクセルの負の自由空間が発生します。これをアイテムから取り除くことで、コンテナーに合わせることができます。 -

The items overflow the container

+![アイテムがコンテナーから溢れてしまう](ratios1.png) -

It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.

+フレックスのプロパティを理解するには、この正の自由空間の分配と負の自由空間の除去を理解する必要があります。 -

In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with flex-direction: column. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.

+以下の例では、{{CSSxRef("flex-direction")}} を row (行) に設定して作業しているので、アイテムの寸法は常に幅に基づいて決定されます。すべてのアイテムの幅の合計とコンテナーの幅を比較して、正と負の自由空間を計算します。それぞれの例を `flex-direction: column` で試すこともできます。主軸が列になり、アイテムの高さと、アイテムが入っているコンテナーの高さを比較して、プラスとマイナスの自由空間を計算する必要が出てきます。 -

flex-basis プロパティ

+## flex-basis プロパティ -

The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is auto. If flex-basis is set to auto then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case 200px would be the flex-basis for this item.

+{{CSSxRef("flex-basis")}} プロパティは、空間の分配が行われる前のフレックスアイテムの初期の大きさを指定します。このプロパティの初期値は `auto` です。`flex-basis` が `auto` に設定されている場合、ブラウザーはアイテムの初期の大きさを計算するために、まずアイテムの主軸方向の寸法に絶対寸法が設定されているかどうかをチェックします。例えば、アイテムの幅を 200 ピクセルに設定している場合です。この場合、`200px` がこのアイテムのフレックスベースとなります。 -

If your item is instead auto-sized, then auto resolves to the size of its content. At this point your knowledge of min- and max-content sizing becomes useful, as flexbox will take the max-content size of the item as the flex-basis. The following live example can help to demonstrate this.

+アイテムの寸法が自動になっている場合、`auto` を指定すると内容物の寸法が解決値になります。このとき、`min-` および `max-content` の寸法に関する知識があると便利です。フレックスボックスでは、アイテムの `max-content` の寸法を `flex-basis` として使用します。次のライブ例でこれを説明します。 -

In this example I have created a series of inflexible boxes, with both flex-grow and flex-shrink set to 0. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a flex-basis of 150px, whereas the other two items have no width and so are sized according to their content width.

+この例では、柔軟性のない一連のボックスを作成し、`flex-grow` と `flex-shrink` の両方を `0` に設定しています。ここでは、主軸方向の寸法として 150 ピクセルの幅を明示的に設定した最初のアイテムが、`flex-basis`として`150px`を取るのに対し、他の2つのアイテムは幅を持たないため、コンテンツの幅に応じたサイズになっていることがわかります。 -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}

+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}} -

In addition to the auto keyword, you can use the content keyword as the flex-basis. This will result in the flex-basis being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using auto as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.

+`auto` キーワードに加えて、`content` キーワードを `flex-basis` として使用することができます。この場合、アイテムに幅が設定されていても、コンテンツの寸法から `flex-basis` が算出されます。これは新しいキーワードで、ブラウザーの対応も少ないのですが、`auto` を flex-basis として使用し、アイテムに幅を設定しないようにすることで、自動で寸法が調整されるので、常に同じ効果を得ることができます。 -

If you want flexbox to completely ignore the size of the item when doing space distribution then set flex-basis to 0. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at flex-grow.

+余白の分配を行う際に、フレックスボックスでアイテムの寸法を完全に無視したい場合は、`flex-basis`を`0`に設定します。これは基本的に、フレックスボックスのすべての空間が利用可能であり、それをアイテムに比例して分配することを指示します。この例は、次に紹介する `flex-grow` で見てみましょう。 -

flex-grow プロパティ

+## flex-grow プロパティ -

The {{CSSxRef("flex-grow")}} property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.

+{{CSSxRef("flex-grow")}}プロパティは、**フレックス伸長係数**を指定します。これは、正の自由空間が分配されたときに、フレックスアイテムがフレックスコンテナー内の他のフレックスアイテムに対してどれだけ伸長するかを決定します。 -

If all of your items have the same flex-grow factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use 1 as the value, however you could give them all a flex-grow of 88, or 100, or 1.2 if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.

+すべてのアイテムの `flex-grow` 係数が同じであれば、余白はすべてのアイテムに均等に分配されます。このような場合、ふつうは値に `1` を使用しますが、すべてのアイテムに `flex-grow` の値として `88`、`100`、`1.2` など与えることもできます。これは係数です。係数がすべてのアイテムで等しく、フレックスコンテナー内に正の自由空間があれば、すべてのアイテムに均等に分配されます。 -

flex-grow と flex-basis を組み合わせる

+### `flex-grow` と `flex-basis` を組み合わせる -

Things can get confusing in terms of how flex-grow and flex-basis interact. Let's consider the case of three flex items of differing content lengths and the following flex rules applied to them:

+`flex-grow` と `flex-basis` がどのように相互作用するかという点については混乱しやすいものです。コンテンツの長さが異なる 3 つのフレックスアイテムに、次のような `flex` ルールを適用した場合を考えてみましょう。 -

flex: 1 1 auto;

+`flex: 1 1 auto;` -

In this case the flex-basis value is auto and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the max-content size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:

+この場合、`flex-basis` の値は `auto` で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、フレックスボックスはアイテムの `max-content` の寸法を見ていることになります。アイテムを並べると、フレックスコンテナー内に正の自由空間 (この画像で斜線を引いた部分) ができます。 -

Images shows the positive free space as a hatched area

+![正の自由空間を斜線で表現している画像](ratios2.png) -

We are working with a flex-basis equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:

+コンテンツの寸法と同じ `flex-basis` を使用しているので、全体の利用可能な空間 (フレックスコンテナーの幅) から分配可能な領域を差し引いた余白を各アイテムに均等に分配しています。大きなアイテムは、他のアイテムと同じ量の余白が割り当てられますが、もともと寸法が大きいので、結果的にもっと大きくなります。 -

The positive space is distributed between items

+![ポジティブな空間は、アイテム間に分配される](ratios3.png) -

If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:

+もし本当に実現したいことが 3 つのアイテムを同じ大きさにすることであれば、最初の寸法が異なっていても、これを使用してください。 -

flex: 1 1 0;

+`flex: 1 1 0;` -

Here we are saying that the size of the item for the purposes of our space distribution calculation is 0 — all the space is up for grabs and as all of the items have the same flex-grow factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.

+ここでは、空間の分配の計算上、アイテムの寸法を `0` としています。すべての空間が確保され、すべてのアイテムが同じ `flex-grow` 係数を持っているので、それぞれに同じ量の空間が分配されることになります。最終的には、3 つの同じ幅の伸縮可能ななアイテムができあがります。 -

Try changing the flex-grow factor from 1 to 0 in this live example to see the different behavior:

+このライブ例で、`flex-grow` 係数を 1 から 0 に変更して、動作の違いを確認してみてください。 -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}

+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}} -

アイテムに別の flex-grow 要素を与える

+### アイテムに個別の flex-grow 要素を与える -

Our understanding of how flex-grow works with flex-basis allows us to have further control over our individual item sizes by assigning items different flex-grow factors. If we keep our flex-basis at 0 so all of the space can be distributed, we could assign each of the three flex items a different flex-grow factor. In the example below I am using the following values:

+`flex-grow` と `flex-basis` の関係を理解すると、アイテムに様々な `flex-grow` 係数を割り当てることで、個々のアイテムの大きさをさらに制御することができるようになります。`flex-basis` を `0` にして、すべての空間を分配できるようにした場合、3 つのフレックスアイテムにそれぞれ異なる `flex-grow` ファクターを割り当てることができます。以下の例では、次のような値を使用しています。 - +- 1 番目のアイテムには `1` +- 2 番目のアイテムには `1` +- 3 番目のアイテムには `2` -

Working from a flex-basis of 0 this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.

+`flex-basis` を `0` とすると、利用可能な空間は次のように分配されます。まずフレックス伸長係数を合計し、フレックスコンテナー内の正の自由空間の合計をその数値、この場合は 4 で割ります。それからそれぞれの値に応じて空間を分配します。 — 1 番目のアイテムは 1 つ分、2 番目は 1 つ分、3 番目は 2 つ分になります。つまり、3 番目のアイテムは、1 番目と 2 番目のアイテムの 2 倍の大きさになります。 -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}

+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}} -

Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to .25, .25, and .50 — you should see the same result.

+ここでは、どんな正の値も使用できることを覚えておいてください。重要なのは、ある項目と他の項目との比率です。大きな数字を使っても、小数を使っても構いません。 — あなた次第です。試しに、上の例で割り当てられた値を `.25`, `.25`, `.50` に変更してみてください。 — 同じ結果が得られるはずです。 -

flex-shrink プロパティ

+## `flex-shrink` プロパティ -

The {{CSSxRef("flex-shrink")}} property specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.

+{{CSSxRef("flex-shrink")}}プロパティでは、**フレックス縮小係数**を指定します。これは、負の自由空間が分配されたときに、フレックスコンテナー内の他のフレックスアイテムに対して、フレックスアイテムがどれだけ縮小するかを決定します。 -

This property deals with situations where the browser calculates the flex-basis values of the flex items, and finds that they are too large to fit into the flex container. As long as flex-shrink has a positive value the items will shrink in order that they do not overflow the container.

+このプロパティは、ブラウザーがフレックスアイテムの `flex-basis` 値を計算して、フレックスコンテナーに収まらない大きさだと判断した場合に対処します。`flex-shrink` に正の値があれば、コンテナーからはみ出さないようにアイテムが縮小されます。 -

So where flex-grow deals with adding available space, flex-shrink manages taking away space to make boxes fit into their container without overflowing.

+つまり、`flex-grow` が利用可能な空間を追加する扱いをするのに対し、`flex-shrink` はボックスがはみ出さずにコンテナーに収まるように空間を縮小する扱いをします。 -

In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With flex-shrink set to 0 the items are not allowed to shrink and so they overflow the box.

+次のライブ例では、3 つのアイテムをフレックスコンテナーに入れています。それぞれに 200 ピクセルの幅を与え、コンテナーの幅は 500 ピクセルにしています。`flex-shrink` を `0` に設定すると、アイテムは縮小できないので、ボックスからはみ出してしまいます。 -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}

+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}} -

Change the flex-shrink value to 1 and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.

+`flex-shrink` の値を `1` に変更すると、すべてのアイテムがボックスに収まるように、各アイテムが同じ量だけ縮小されるのがわかります。これは、すべてのアイテムがボックスに収まるようにするために、最初の幅よりも小さくしたものです。 -

flex-shrink と flex-basis を組み合わせる

+### `flex-shrink` と `flex-basis` の組み合わせ -

You could say that flex-shrink works in pretty much the same way as flex-grow. However there are two reasons why it isn’t quite the same.

+`flex-shrink` は、`flex-grow` とほとんど同じように動作すると言えるでしょう。しかし、*完全に*同じではない理由が 2 つあります。 -

While it is usually subtle, defined in the specification is one reason why flex-shrink isn’t quite the same for negative space as flex-grow is for positive space:

+通常は些細な違いですが、仕様に定義されていることは、負の空間に対して `flex-shrink` が行うことが、正の空間に対して `flex-grow` が行うこととまったく同じではない理由の一つです。 -
-

“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”

-
+> 「注：負の空間を分配する際には、フレックス縮小係数にフレックスベースの大きさが乗じられます。これは、アイテムが縮小できる量に比例して負の空間を分配するもので、例えば、大きなアイテムが目に見えて縮小する小さなアイテムが、大きなアイテムが目立って縮小する前にゼロまで縮小してしまうことはありません。」 -

The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their min-content size — the size that they become if they take advantage of any soft wrapping opportunities available to them.

+2 つ目の理由は、フレックスボックスは、負の自由空間を除去する際に小さなアイテムがゼロの大きさにまで縮小することを防ぐためです。アイテムは `min-content` の寸法が下限になります。 — 可能な限りすべてのソフト折り返しの機会を利用した後の寸法です。 -

You can see this min-content flooring happen in the below example, where the flex-basis is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that min-content size. As the box gets smaller space is then just removed from the third item.

+以下の例では、`min-content` の下限になり、`flex-basis` が内容物の大きさに解決されていることがわかります。フレックスコンテナーの幅を 700px などに変更してからフレックスアイテムの幅を小さくすると、最初の 2 つのアイテムは折り返されますが、`min-content` の寸法より小さくなることはありません。ボックスが小さくなると、3 つ目のアイテムが縮小します。 -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}

+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}} -

In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.

+実際には、縮小の動作は妥当な結果をもたらす傾向があります。通常、内容物が完全に消えてしまったり、ボックスが最小の内容物よりも小さくなってしまったりすることはありません。そのため、上記のルールは、コンテナーに収まるように内容物を縮小する必要がある場合の適切な動作という点で、理にかなっています。 -

アイテムに別の flex-shrink 要素を与える

+### アイテムに別の `flex-shrink` 要素を与える -

In the same way as flex-grow, you can give flex-items different flex-shrink factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.

+`flex-grow` と同様に、それぞれのフレックスアイテムにに異なる `flex-shrink` 係数を与えることができます。これにより、たとえば、あるアイテムを兄弟アイテムよりも急速に縮小させたり、まったく縮小させないようにしたい場合に、既定の動作を変更することができます。 -

In the following live example the first item has a flex-shrink factor of 1, the second 0 (so it won’t shrink at all), and the third 4. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for flex-grow you can use decimals or larger numbers here. Choose whatever makes most sense to you.

+次のライブ例では、1 番目のアイテムの `flex-shrink` 係数は 1、2 番目のアイテムは `0` (つまり、まったく縮まない)、3 番目のアイテムは `4` です。したがって、3 番目のアイテムは、1 番目のアイテムよりも急速に縮小します。`flex-grow` と同様に、ここでも小数や大きな数字を使うことができます。最も分かりやすいものを選んでください。 -

{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}

+{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}} -

flex アイテムのサイズ設定をマスターする

+## フレックスアイテムの寸法の設定をマスターする -

The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:

+フレックスアイテムの寸法の調整の仕組みを理解するには、いくつかの要素を理解する必要があります。このガイドでは、以下の点について説明してきました。 -

アイテムの基本サイズを何がセットするか？

+## アイテムの基本的な寸法に何が設定されているか -
    -
  1. Is flex-basis set to auto, and does the item have a width set? If so, the size will be based on that width.
    2. -
  2. Is flex-basis set to auto or content (in a supporting browser)? If so, the size is based on the item size.
    3. -
  3. Is flex-basis a length unit, but not zero? If so this is the size of the item.
    4. -
  4. Is flex-basis set to 0? if so then the item size is not taken into consideration for the space-sharing calculation.
    5. -
+1. `flex-basis` が `auto` に設定されていて、アイテムに幅が設定されている場合は、その幅に応じた寸法になります。 +2. `flex-basis` が `auto` または `content` (対応しているブラウザーの場合) に設定されている場合は、寸法はアイテムの寸法に基づいて決定されます。 +3. `flex-basis` が長さの単位で、0 ではない場合は、これがアイテムの寸法になります。 +4. `flex-basis` が `0` に設定されている場合は、アイテムの寸法は空間共有の計算には考慮されません。 -

利用できるスペースが残っているか？

+### 利用できる余白が残っているか -

Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.

+正の自由空間がないとアイテムは伸長しませんし、負の自由空間がないとアイテムは縮小しません。 -
    -
  1. If we took all of the items and added up their widths (or heights if working in a column), is that total less than the total width (or height) of the container? If so, then you have positive free space and flex-grow comes into play.
    2. -
  2. If we took all of the items and added up their widths (or heights if working in a column), is that total more than the total width (or height) of the container? If so, you have negative free space and flex-shrink comes into play.
    3. -
+1. すべてのアイテムの幅 (列の場合は高さ) を合計したとき、その合計がコンテナーの幅 (または高さ) の合計よりも**小さい**場合は、正の自由空間があり、`flex-grow` の出番となります。 +2. すべてのアイテムの幅 (列の場合は高さ) を合計した場合、その合計がコンテナーの幅 (または高さ) の合計より**大きい**場合は、負の自由空間があり、`flex-shrink` が効いてきます。 -

スペースを配分する別の方法

+### 空間を分配する別の方法 -

If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.

+アイテムに空間を追加したくない場合は、「フレックスコンテナー内のアイテムの配置」で説明している配置プロパティを使って、アイテム間やアイテム周辺の自由空間を処理できることを覚えておいてください。{{CSSxRef("justify-content")}} プロパティを使用すると、アイテム間やアイテム周辺の自由空間の分配が可能になります。また、フレックスアイテムに auto のマージンを使用すると、スペースを吸収してアイテム間に隙間を作ることができます。 -

With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.

+自由に使えるフレックスツールがあれば、最初は少し試行錯誤するかもしれませんが、ほとんどの作業が可能であることがわかります。 diff --git a/files/ja/web/css/css_flexible_box_layout/index.md b/files/ja/web/css/css_flexible_box_layout/index.md index efe2e9fa39..752d709abb 100644 --- a/files/ja/web/css/css_flexible_box_layout/index.md +++ b/files/ja/web/css/css_flexible_box_layout/index.md @@ -3,116 +3,85 @@ title: CSS フレックスボックスレイアウト slug: Web/CSS/CSS_Flexible_Box_Layout tags: - CSS - - CSS Flexible Boxes - - Guide - - Overview - - Reference - - flexbox + - CSS フレックスボックス + - ガイド + - 概要 + - リファレンス + - フレックスボックス translation_of: Web/CSS/CSS_Flexible_Box_Layout --- -
{{CSSRef}}
- -

CSS フレックスボックスレイアウト (CSS Flexible Box Layout) は CSS のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。

- -

基本的な例

- -

以下の例では、コンテナーに display: flex に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 justify-content の値は、主軸上に均等に配置するため、 space-between に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 align-items の既定値は stretch なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

- -

リファレンス

- -

CSS プロパティ

- -
- -
- -

配置プロパティ

- -

align-content, align-self, align-items, justify-content の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。

- -
- -
- -

用語集の項目

- -
- -
- -

ガイド

- -
-
フレックスボックスの基本概念
-
フレックスボックスの機能の概要
-
フレックスボックスと他のレイアウト方法の関係
-
フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか
-
フレックスコンテナーにおけるアイテムの配置
-
ボックス配置プロパティがどのようにフレックスボックスに働くか
-
フレックスアイテムの順序
-
アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。
-
主軸に沿ったフレックスアイテムの比率の操作
-
flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。
-
フレックスアイテムの折り返しのマスター
-
複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。
-
典型的なフレックスボックスの用途
-
典型的なフレックスボックスの用途の一般的なデザインパターン。
-
フレックスボックスの後方互換性
-
フレックスボックスのブラウザーの互換性状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応
-
- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}初回定義
- -

関連情報

- -
-
Flexbugs
-
コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧
-
ブラウザーに依存しないフレックスボックスのミックスイン
-
この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。
-
+{{CSSRef}} + +**CSS フレックスボックスレイアウト** (CSS Flexible Box Layout) は [CSS](/ja/docs/Web/CSS) のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。 + +## 基本的な例 + +以下の例では、コンテナーに `display: flex` に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 `justify-content` の値は、主軸上に均等に配置するため、 `space-between` に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 `align-items` の既定値は `stretch` なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。 + +{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 600)}} + +## リファレンス + +## CSS プロパティ + +- {{cssxref("flex")}} +- {{cssxref("flex-basis")}} +- {{cssxref("flex-direction")}} +- {{cssxref("flex-flow")}} +- {{cssxref("flex-grow")}} +- {{cssxref("flex-shrink")}} +- {{cssxref("flex-wrap")}} +- {{cssxref("order")}} + +### 配置プロパティ + +`align-content`, `align-self`, `align-items`, `justify-content` の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置 (Box Alignment) の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。 + +- {{cssxref("justify-content")}} +- {{cssxref("align-content")}} +- {{cssxref("align-items")}} +- {{cssxref("align-self")}} +- {{cssxref("place-content")}} +- {{cssxref("place-items")}} +- {{cssxref("row-gap")}} +- {{cssxref("column-gap")}} +- {{cssxref("gap")}} + +### 用語集の項目 + +- {{Glossary("Flexbox", "フレックスボックス", 1)}} +- {{Glossary("Flex Container", "フレックスコンテナー", 1)}} +- {{Glossary("Flex Item", "フレックスアイテム", 1)}} +- {{Glossary("Main Axis", "主軸", 1)}} +- {{Glossary("Cross Axis", "交差軸", 1)}} +- {{Glossary("Flex", "フレックス", 1)}} + +## ガイド + +- [フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) + - : フレックスボックスの機能の概要 +- [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods) + - : フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか +- [フレックスコンテナーにおけるアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container) + - : ボックス配置プロパティがどのようにフレックスボックスに働くか +- [フレックスアイテムの順序](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items) + - : アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。 +- [主軸に沿ったフレックスアイテムの比率の操作](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax) + - : flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。 +- [フレックスアイテムの折り返しのマスター](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items) + - : 複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。 +- [典型的なフレックスボックスの用途](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox) + - : 典型的なフレックスボックスの用途の一般的なデザインパターン。 +- [フレックスボックスの後方互換性](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox) + - : フレックスボックスのブラウザーの互換性状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応 + +## 仕様書 + +| 仕様書 | 状態 | 備考 | +| ------------------------------ | --------------------------- | -------- | +| {{ SpecName('CSS3 Flexbox') }} | {{ Spec2('CSS3 Flexbox') }} | 初回定義 | + +## 関連情報 + +- [Flexbugs](https://github.com/philipwalton/flexbugs) + - : コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧 diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 6841280981..058f1c8f68 100644 --- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -1,92 +1,96 @@ --- title: フレックスアイテムの折り返しのマスター slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +tags: + - CSS + - Flex + - ガイド + - collapsed items + - フレックスボックス + - grid + - 折り返し translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items --- -

フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が row の場合は新しい行を、 flex-direction が column の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより CSS グリッドレイアウトが必要になるかを説明します。

+{{CSSRef}} -

折り返しを行う

+フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が `row` の場合は新しい行を、 `flex-direction` が `column` の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)が必要になるかを説明します。 -

The initial value of the {{cssxref("flex-wrap")}} property is nowrap. This means that if you have a set of flex items that are too wide for their container, they will overflow it. If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap, or use the shorthand {{cssxref("flex-flow")}} with values of row wrap or column wrap.

+## 折り返しを行う -

Items will then wrap in the container. In the next example I have ten items all with a flex-basis of 160px and the ability to grow and shrink. Once the first row gets to a point where there is not enough space to place another 160 pixel item, a new flex line is created for the items and so on until all of the items are placed. As the items can grow, they will expand larger than 160 px in order to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line.

+{{cssxref("flex-wrap")}} プロパティの初期値は `nowrap` です。つまり、コンテナーに対して幅が広すぎるフレックスアイテムのセットがあると、コンテナーからはみ出してしまいます。幅が広くなりすぎたら折り返すようにしたい場合は、`flex-wrap` プロパティを追加して `wrap` の値を設定するか、一括指定の {{cssxref("flex-flow")}} を使用して `row wrap` または `column wrap` の値を設定する必要があります。 -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}

+アイテムはコンテナーの中に収まります。次の例では、10 個のアイテムを配置しています。すべてのアイテムの `flex-basis` は 160px で、伸長と縮小が可能です。最初の列で 160 ピクセルのアイテムを配置する空間がなくなると、新しいフレックス行が作成され、すべてのアイテムが配置されるまで繰り返されます。アイテムが成長すると、各列を完全に埋めるために、160 ピクセルよりも大きく拡張されます。最終行にアイテムが 1 つしかない場合は、行全体を埋めるように伸縮します。 -

We can see the same thing happening with columns. The container will need to have a height in order that the items will start wrapping and creating new columns, and items will stretch taller to fill each column completely.

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}} -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}

+これと同じことが列でも起こります。アイテムが折り返して新しい列を作り始め、それぞれの列を完全に埋めるためにアイテムを伸長するようにするためには、コンテナーに高さを設定する必要があります。 -

折り返しと flex-direction

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}} -

Wrapping works as you might expect when combined with flex-direction. If flex-direction is set to row-reverse then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.

+## 折り返しと flex-direction -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}

+折り返しは、`flex-direction` と組み合わせることで、期待通りの効果を発揮します。`flex-direction` が `row-reverse` に設定されている場合、アイテムはコンテナーの端から始まり、逆順に並んでいきます。 -

Note that the reversing is only happening in the inline, row direction. We start on the right then go onto the second line and again start from the right. We aren’t reversing in both directions, starting from the bottom coming up the container!

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}} -

一次元のレイアウトの説明

+なお、反転は行内方向にのみ行われます。右から開始して 2 行目に進み、再び右から開始します。下から開始してコンテナーを上がっていくという、両方の方向で反転しているわけではありません。 -

As we have seen from the above examples if our items are allowed to grow and shrink, when there are fewer items in the last row or column then those items grow to fill the available space.

+## 一次元レイアウトの説明 -

There is no method in flexbox to tell items in one row to line up with items in the row above — each flex line acts like a new flex container. It deals with space distribution across the main axis. If there is only one item, and that item is allowed to grow, it will fill the axis just as if you had a single item flex container.

+上の例で見たように、アイテムが伸縮することが許されていれば、最後の行や列のアイテムが少なくなると、それらのアイテムは空いた空間を埋めるように伸びていきます。 -

If you want layout in two dimensions then you probably want Grid Layout. We can compare our wrapped row example above with the CSS Grid version of that layout to see the difference. The following live sample uses CSS Grid Layout to create a layout that has as many columns of at least 160 pixels as will fit, distributing the extra space between all columns. However, in this case the items stay in their grid and don’t stretch out when there are fewer of them on the final row.

+フレックスボックスには、ある行のアイテムとその上の行のアイテムの位置を揃える方法はありません。各フレックス行は新しいフレックスコンテナーのように機能します。これが主軸の空間分配を行います。アイテムが 1 つだけで、そのアイテムが成長することが許可されている場合、1 つのアイテムのフレックスコンテナーがある場合と同様に、その軸いっぱいに表示されます。 -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}

+2 次元でのレイアウトが必要な場合は、おそらくグリッドレイアウトを使用します。上記の折り返し行の例を CSS グリッド版のレイアウトと比較すると、違いが分かります。次のライブサンプルでは、CSS グリッドレイアウトを使用して、160 ピクセル以上の列が収まるだけのレイアウトを作成し、余分な空間をすべての列に分配しています。ただし、この場合、アイテムはグリッド内に留まり、最終行のアイテム数が少なくなっても伸びることはありません。 -

This is the difference between one and two-dimensional layout. In a one dimensional method like flexbox, we only control the row or column. In two dimensional layout like grid we control both at the same time. If you want the space distribution row by row, use flexbox. If you don’t, use Grid.

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}} -

フレックスボックスベースのグリッドシステムはどのように動作するか

+これが一次元と二次元のレイアウトの違いです。フレックスボックスのような一次元方式では、行または列のみを制御します。グリッドのような二次元のレイアウトでは、両方を同時に制御します。行ごとに空間を分配したい場合は、フレックスボックスを使用してください。そうでない場合は、グリッドを使用してください。 -

Typically flexbox-based grid systems work by taking flexbox back to the familiar world of float-based layouts. If you assign percentage widths to flex items — either as flex-basis or by adding a width to the item itself leaving the value of flex-basis as auto — you can get the impression of a two dimensional layout. You can see this working in the example below.

+## フレックスボックスベースのグリッドシステムはどのように機能するか -

Here I have set flex-grow and flex-shrink to 0 to make inflexible flex items and am then controlling flexibility using percentages, just like we used to do in float layouts.

+通常、フレックスボックスベースのグリッドシステムは、フレックスボックスを馴染みのある float ベースのレイアウトの世界に戻すことで機能します。フレックスアイテムにパーセント値の幅を割り当てると、`flex-basis` として、または `flex-basis` の値を `auto` のままにしてアイテム自体に幅を追加することで、2 次元のレイアウトのような印象を与えることができます。以下の例では、この機能を確認できます。 -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}

+ここでは、`flex-grow` と `flex-shrink` を `0` に設定して、柔軟性のないフレックスアイテムを作り、フロートレイアウトで行っていたように、パーセント値を使って柔軟性をコントロールしています。 -

If you need flex items to line up in the cross axis, controlling the width in this way will achieve that. In most cases however, adding widths to flex items in this way demonstrates that you would probably be better served by switching to grid layout for that component.

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}} -

アイテム間の溝の作成

+フレックスアイテムを横軸に並べる必要がある場合は、この方法で幅を制御することで実現できます。しかし、ほとんどの場合、この方法でフレックスアイテムに幅を追加する場合は、その部分をグリッドレイアウトに変更した方がよいことがわかります。 -

When wrapping flex items, the need to space them out is likely to arise. At the current time we do not have any implementations of the gap properties from the Box Alignment module for Flexbox. In the future we will be able to simply use row-gap and column-gap for flexbox as we do for CSS Grid. At the current time you will need to use margins to achieve this.

+## アイテム間の間隔の生成 -

You can see from the live example below that in order to create gaps that do not also create a gap at the edges of the container, we need to use negative margins on the flex container itself. Any border on the flex container is then moved to a second wrapper in order that the negative margin can pull the items up to that wrapper element.

+フレックスアイテムを折り返すする際に、余白を空ける必要がある場合があります。現時点では、[Box Alignment モジュール](https://www.w3.org/TR/css-align-3/) の gap プロパティをフレックスボックス用に実装したものはありません。将来的には、CSS グリッドと同様に、フレックスボックスでも `row-gap` と `column-gap` を使用できるようになる予定です。現時点では、これを実現するためには、margin を使用する必要があります。 -

It is this requirement that the gap properties, once implemented, will solve for us. Proper gaps only happen on the inside edges of items.

+下の実例を見ると、コンテナーの端に隙間ができないように隙間を作るためには、フレックスコンテナー自体に負のマージンを使用する必要があることがわかります。フレックスコンテナーの境界は 2 番目のラッパーに移動し、負のマージンによってアイテムをラッパー要素に引き上げることができます。 -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}

+これが gap プロパティが必要な理由で、実装されれば問題の解決になります。gap は適切にアイテムの内側の辺にのみ置かれます。 -

アイテムの折りたたみ

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}} -

The flexbox specification details what should happen if a flex item is collapsed by setting visibility: collapse on an item. See the MDN documentation for the {{cssxref("visibility")}} property. The specification describes the behaviour as follows:

+## アイテムの折り畳み -
-

“Specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size stable. Thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layout to "wobble". Flex line wrapping is re-done after collapsing, however, so the cross-size of a flex container with multiple lines might or might not change.” - Collapsed items

-
+フレックスボックスの仕様では、アイテムに `visibility: collapse` を設定することで、フレックスアイテムが折り畳まれた場合の動作が詳細に規定されています。{{cssxref("visibility")}} プロパティの MDN ドキュメントを参照してください。仕様では、以下のように動作を説明しています。 -

This behaviour is useful if you want to target flex items using JavaScript to show and hide content for example. The example in the specification demonstrates one such pattern.

+> 「フレックスアイテムに visibility:collapse を指定すると、折り畳まれたフレックスアイテムになり、table-row や table-column の visibility:collapse と同様の効果が得られます。折り畳まれたフレックス アイテムはレンダリングから完全に削除されますが、フレックス行の交差軸の寸法を安定させる「支柱」が残ります。したがって、フレックスコンテナーにフレックス行が 1 つしかない場合、アイテムの折り畳み状態を動的に変化させると、フレックスコンテナーの主軸の寸法が変更されることがありますが、交差軸の寸法には影響しないことが保証されているため、ページの残りのレイアウトが「ぐらつく」ことはありません。ただし、フレックスの行の折り返しは折り畳み後に再実行されるため、複数の行を持つフレックスコンテナーの交差軸の寸法は変更される場合もあれば、変更されない場合もあります。" - [Collapsed items](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) -

In the following live example I have a non-wrapped flex container. The third item has more content than the others yet is set to visibility: collapse and therefore the flex container is retaining a strut of the height required to display this item. If you remove visibility: collapse from the CSS or change the value to visible, you will see the item disappear and the space redistribute between non-collapsed items; the height of the flex container should not change.

+この動作は、JavaScript を使用してフレックスアイテムを対象にし、コンテンツの表示・非表示を行う場合などに便利です。仕様書の例では、そのようなパターンの一つを示しています。 -
-

Note: Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden.

-
+次のライブ例では、折り返されていないフレックスコンテナーを使用しています。3 番目のアイテムは他のアイテムよりもコンテンツが多いのですが、`visibility: collapse` に設定されているため、フレックスコンテナーはこのアイテムを表示するために必要な高さの*支柱*を保持しています。CSS から `visibility: collapse` を削除するか、値を `visible` に変更すると、アイテムが消えて、折り畳まれていないアイテムの間にスペースが再分配されますが、フレックスコンテナの高さは変わりません。 -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

+> **Note:** Chrome や Safari では折りたたまれている部分は非表示として扱われるため、以下の 2 つの例は Firefox を使用してください。 -

When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done after collapsing. So the browser needs to re-do the wrapping behaviour to account for the new space that the collapsed item has left in the inline direction.

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}} -

This means that items might end up on a different line to the one they started on. In the case of an item being shown and hidden it could well cause the items to end up in a different row.

+しかし、複数行のフレックスコンテナーを扱う場合は、折り返しが折り返しの後に再実行されることを理解する必要があります。つまり、ブラウザーは折り畳まれたアイテムがインライン方向に残した新しい空間を考慮して、折り返しの動作を再実行する必要があります。 -

I have created this behaviour in the next live example. You can see how the stretching changes row based on the location of the collapsed item. If you add more content to the second item, it changes row once it gets long enough. That top row then only becomes as tall as a single line of text.

+つまり、アイテムが最初の行とは別の行になってしまう可能性があるのです。アイテムを表示したり隠したりすると、アイテムが別の行になってしまうこともあります。 -

{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

+次のライブ例では、この動作を作成しました。折り畳まれたアイテムの位置に基づいて、引き伸ばされている行が変化している様子がわかります。2 番目のアイテムにさらにコンテンツを追加すると、十分な長さになった時点で行が変更されます。その結果、一番上の行は、テキストの 1 行分の高さにしかなりません。 -

If this causes a problem for your layout it may require a rethinking of the structure, for example putting each row into a separate flex container in order that they can’t shift rows.

+{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}} -

visibility: hidden と display: none の違い

+これによりレイアウトに問題が生じる場合は、構造を見直す必要があるかもしれません。たとえば、各行を別々のフレックスコンテナーに入れて、行がずれないようにするなどです。 -

When you set an item to display: none in order to hide it, the item is removed from the formatting structure of the page. What this means in practice is that counters ignore it, and things like transitions do not run. Using visibility: hidden keeps the box in the formatting structure which is useful in that it still behaves as if it were part of the layout even though the user can’t see it.

+### `visibility: hidden` と `display: none` の違い -

{{CSSRef}}

+アイテムを `display: none` に設定して非表示にすると、そのアイテムはページの整形構造から削除されます。すなわち、カウンターはそれを無視し、トランジションも実行されません。`visibility: hidden` を使用すると、ボックスは整形構造の中に維持され、ユーザーには見えなくても、レイアウトの一部であるかのように動作することができるので便利です。 diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align10.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align10.png new file mode 100644 index 0000000000..649a93b863 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align10.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align11.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align11.png new file mode 100644 index 0000000000..82698ad482 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align11.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align9.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align9.png new file mode 100644 index 0000000000..a9ef5380b9 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/align9.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/basics1.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/basics1.png new file mode 100644 index 0000000000..d5a5f920a4 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/basics1.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md index 8a2a488baa..d4f8897e9d 100644 --- a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -2,143 +2,125 @@ title: フレックスアイテムの並べ替え slug: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items tags: - - Accessibility + - アクセシビリティ - CSS - Flex - - Guide - - direction - - flexbox + - ガイド + - 方向 + - フレックスボックス - order - reverse translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items --- -

{{CSSRef}}

+{{CSSRef}} -

フレックスボックスやグリッドといった新しいレイアウト方法には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法についてみていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。

+フレックスボックスやグリッドといった新しいレイアウト方式には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法について見ていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。 -

アイテムを逆順に表示する

+## アイテムを逆順に表示する -

{{cssxref("flex-direction")}} プロパティは以下の４つの値から一つを設定できます。

+{{cssxref("flex-direction")}} プロパティは以下の 4 つの値のうち一つを取ることができます。 - +- `row` +- `column` +- `row-reverse` +- `column-reverse` -

上２つの値は、アイテムの順序を文書のソースに現れる順と同じ順序で、始点から連続して表示します。

+最初の 2 つの値は、文書のソースの順番と同じ順番で項目を保持し、先頭行から順に表示します。 -

左から始まり一行に表示されるアイテム

+![アイテムが左から始まり一行に表示されています。](basics1.png) -

上から始まり一列に表示されるアイテム

+![アイテムが上から始まり一列に表示されています。](align10.png) -

下２つの値は始点と終点を入れ替えて、アイテムを逆順に表示します。

+下 2 つの値は先頭と末尾を入れ替えて、アイテムを逆順に表示します。 -

右側から逆順に表示されるアイテム

+![アイテムが右から始まり逆順に表示されています。](align9.png) -

下側から逆順に一列に表示されるアイテム

+![アイテムが下から始まり一列に逆順に表示されています。](align11.png) -

始点は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、row と row-reverse が英語のような左から右の言語においてどのように作用するかを示しています。アラビア語のような右から左の言語を使用している場合には、row では右から始まり row-reverse では左から始まります。

+先頭は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、`row` と `row-reverse` が英語のような左書きの言語においてどのように作用するかを示しています。アラビア語のような右書きの言語を使用している場合には、`row` では右から始まり `row-reverse` では左から始まります。 -

アラビア文字の場合に row が右から始まり、 row-reverse では左から始まることを示すフレックスコンテナー

+![アラビア文字の場合に row が右から始まり、 row-reverse では左から始まることを示すフレックスコンテナー](order-rtl.png) -

これは、アイテムが表示上でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。

+これは、アイテムが*表示上*でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。 -
-

“Note: The reordering capabilities of flex layout intentionally affect only the visual rendering, leaving speech order and navigation based on the source order. This allows authors to manipulate the visual presentation while leaving the source order intact for non-CSS UAs and for linear models such as speech and sequential navigation.” - Ordering and Orientation

+> 「注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。」 - [Ordering and Orientation](https://www.w3.org/TR/css-flexbox-1/#flow-order) -

(注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。 Ordering and Orientation より引用)

-
+仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。 -

仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。

+逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。 -

逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。

+> 「文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の \*-reverse 値をソース順序の修正の代用として利用してはいけません。」 -
-

“Authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.”

+> **Note:** 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。 -

(文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の -reverse 値をソース順序の修正の代用として利用してはいけません。)

-
+以下の例ではリンクからリンクにタブ移動した際に、どれが強調されているかわかりやすいように focus スタイルを加えています。`flex-direction` を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。 -
-

注: 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。

-
+{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}} -

以下の例ではリンクからリンクにタブ移動した際に、どれがハイライトされているかわかりやすいように focus スタイルを加えています。flex-direction を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。

+`flex-direction` の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。 -

{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+## order プロパティ -

flex-direction の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。

+フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。 -

order プロパティ

+`order` プロパティは、アイテムを*数字で順序づけたグループ*でレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。 -

フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。

+例として、5 つのアイテムに対して以下のように `order` を割り当てます。 -

order プロパティはアイテムのレイアウトを数字で順序づけたグループにレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。

+- ソース上で 1 番目のアイテム: `order: 2` +- ソース上で 2 番目のアイテム: `order: 3` +- ソース上で 3 番目のアイテム: `order: 1` +- ソース上で 4 番目のアイテム: `order: 3` +- ソース上で 5 番目のアイテム: `order: 1` -

例として、５つのアイテムに対して以下のように order を割り当てます。

+このときアイテムは以下の順序でページ上に表示されます。 - +- ソース上で 3 番目のアイテム: `order: 1` +- ソース上で 5 番目のアイテム: `order: 1` +- ソース上で 1 番目のアイテム: `order: 2` +- ソース上で 2 番目のアイテム: `order: 3` +- ソース上で 4 番目のアイテム: `order: 3` -

このときアイテムは以下の順序でページ上に表示されます。

+![ソース上の順序を示す番号を表示している順序変更されたアイテム](order-property.png) - +以下の例で値を変更して、表示順がどのように変わるか試してみてください。また `flex-direction` を `row-reverse` に変えたときに何が起こるか、つまり先頭が変わるために反対側から並べられることを確かめましょう。 -

ソース上の順序を示す番号を表示している順序変更されたアイテム

+{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}} -

以下の例で値を変更して、表示順がどのように変わるか試してみてください。また flex-direction を row-reverse に変えたときに何が起こるか、つまり始点が変わるために反対側から並べられることを確かめましょう。

+フレックスアイテムの既定の `order` は `0` です。したがって 0 より大きい `order` をもつアイテムは、明示的に `order` を指定されていないアイテムの後ろに表示されます。 -

{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+`order` には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに `order: -1` を設定することで、0 より小さい `order` のこのアイテムが常に先頭に表示されるようになります。 -

フレックスアイテムのデフォルトの order は 0 です。したがって 0 より大きい order をもつアイテムは、明示的に order を指定されていないアイテムの後ろに表示されます。

+以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている `active` クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。 -

order には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに order: -1 を設定することで、0 より小さい order のこのアイテムが常に先頭に表示されるようになります。

+{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}} -

以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている active クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。

+アイテムは仕様書の中で _order-modified document order_ として述べられているものに従って表示されます。アイテムが表示される前に、`order` プロパティの値が考慮されます。 -

{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+`order` はアイテムの描画順についても変更します。`order` の値が小さいものから先に描画され、大きくなる順に描画されていきます。 -

アイテムは仕様の中で order-modified document order として述べられているものに従って表示されます。アイテムが表示される前に、order プロパティの値が考慮されます。

+## order プロパティとアクセシビリティ -

order はアイテムの描画順についても変更します。order の値が小さいものから先に描画され、大きくなる順に描画されていきます。

+`order` プロパティの使用は、`flex-direction` による方向の変更と同様のアクセシビリティに対する影響があります。`order` は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。 -

order プロパティとアクセシビリティ

+この記事中の例でタブ移動を試すことで、`order` がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。 -

order プロパティの使用は、flex-direction による方向の変更と同様のアクセシビリティに対する影響があります。order は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。

+- [Flexbox and the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/) +- [HTML Source Order vs CSS Display Order](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html) +- [The Responsive Order Conflict for Keyboard Focus](https://alastairc.uk/2017/06/the-responsive-order-conflict/) -

この記事中の例でタブ移動を試すことで、order がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。

+## order の用途 - +フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば `order` プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。 -

order の利用場面

+例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。 -

フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば order プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。

+![日付が先頭にあり、見出しと本文がそれに続いているデザインコンポーネント](order-card.png) -

例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。

+表示上では日付が見出しの上に現れています。しかし画面リーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを `order` プロパティで実現することができます。 -

日付が先頭にあり、見出しと本文がそれに続いているデザインコンポーネント

+カードをフレックスコンテナーとして、`flex-direction` を `column` に設定します。そして、日付に `order: -1` を設定します。これによって見出しの上に日付を引き上げることができます。 -

表示上では日付が見出しの上に現れています。しかしスクリーンリーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを order プロパティで実現することができます。

+{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}} -

カードをフレックスコンテナーとして、flex-direction を column に設定します。そして、日付に order: -1 を設定します。これによって見出しの上に日付を引き上げることができます。

- -

{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

- -

この例のような細かな調整は order プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして order プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチスクリーンではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。

+この例のような細かな調整は `order` プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして `order` プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチ画面ではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。 diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-rtl.png b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-rtl.png new file mode 100644 index 0000000000..05a2036c05 Binary files /dev/null and b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/order-rtl.png differ diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md index 7ec4dbc572..377cad818d 100644 --- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -4,134 +4,114 @@ slug: >- Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods tags: - CSS - - CSS フレックスボックス - - Guide - - Writing Mode - - box alignment + - ガイド + - 書字方向 + - ボックス配置 - contents - display - - flexbox - - grid - フレックスボックス - - ボックス配置 - - 書字方向 + - grid translation_of: >- Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods --- -
{{CSSRef}}
- -

この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。

- -
-

メモ: CSS のバージョン 1 とバージョン 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。

-
- -

ボックス配置モジュール

- -

多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。

+{{CSSRef}} -

これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では Box Alignment Specification の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿ったスペースの分配についても扱っています。

+この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。 -

ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。

+> **Note:** CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。 -
-

メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。

+## ボックス配置モジュール -

(訳注: https://www.w3.org/TR/css-flexbox-1/#alignment より引用)

-
+多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。 -

このガイドの後の記事「フレックスコンテナーでのアイテムの配置」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。

+これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では [Box Alignment 仕様書](https://www.w3.org/TR/css-align-3/)の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿った余白の分配についても扱っています。 -

gap プロパティ

+ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。 -

ボックス配置仕様書に最近追加されたものが、 {{cssxref("row-gap")}} プロパティ と {{cssxref("column-gap")}} プロパティ、およびこれらの一括指定プロパティ {{cssxref("gap")}} です。これらのプロパティは、はじめは CSS Grid 仕様の中で、それぞれ grid-row-gap, grid-column-gap, grid-gap として定義されていましたが、フレックスボックスを含めたすべてのレイアウト方法で使用できるように名前が変更され Box Alignment に移動されました。各ブラウザーがフレックスボックスの gap プロパティを実装するまでは、アイテム間にギャップを作るには {{cssxref("margin")}} プロパティを使うことになります。

+> "メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。" +(訳注: [https://www.w3.org/TR/css-flexbox-1/#alignment](https://www.w3.org/TR/css-flexbox-1/#alignment) より引用) -

書字方向

+このガイドの後の記事「[フレックスコンテナーでのアイテムの配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。 -

「フレックスボックスの基本概念」の記事で、フレックスボックスが書字方向対応であることに触れました。書字方向については CSS の Writing Modes specification で詳細に記されており、国によって異なる様々な書字方向をどのように CSS がサポートしているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。 block 方向と inline 方向について理解することが、新しいレイアウト方法の鍵となります。

+## 書字方向 -

コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、この記事を参照してください。

+「[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)」の記事で、フレックスボックスが**書字方向対応**であることに触れました。書字方向については CSS の [Writing Modes 仕様書](https://www.w3.org/TR/css-writing-modes-3/)で詳細に記されており、国によって異なる様々な書字方向にどのように CSS が対応しているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。**ブロック**方向と**インライン**方向について理解することが、新しいレイアウト方法の鍵となります。 -

書字方向

+コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、[この記事](https://24ways.org/2016/css-writing-modes/)を参照してください。 -

Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。

+### 書字方向 - +Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。 -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+- `horizontal-tb` +- `vertical-rl` +- `vertical-lr` +- `sideways-rl` +- `sideways-lr` -

sideways-rl と sideways-lr の対応は現時点では Firefox のみということに注意してください。また writing-mode とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については MDN の書字方向のドキュメントに情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。

+{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} -

CSS の writing-mode プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で html 要素に dir 属性と lang 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。

+`sideways-rl` と `sideways-lr` の対応は現時点では Firefox のみということに注意してください。また `writing-mode` とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については [MDN の書字方向のドキュメント](/ja/docs/Web/CSS/writing-mode)に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。 -

フレックスボックスと他のレイアウト方法

+CSS の `writing-mode` プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で `html` 要素に `dir` 属性と `lang` 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS が読み込まれなかったとしても文書を正しく表示することができます。 -

フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に起こることの定義が含まれています。例えば float 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。

+## フレックスボックスと他のレイアウト方法 -

display: flex に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。

+フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に[起こることの定義](https://www.w3.org/TR/css-flexbox-1/#flex-containers)が含まれています。例えば `float` 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。 -

フレックスアイテムについては、ある要素は浮動 (float) や解除 (clear) が設定されていて、その上で親要素に display: flex が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。inline-block やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。

+`display: flex` に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。 -

次の例では、子要素は浮動設定されており、コンテナーには display: flex が設定されています。display: flex を削除すると、解除が適用されていないため .box が折りたたまれます。再度 display: flex を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。

+フレックスアイテムについては、ある要素は浮動 (`float`) や解除 (`clear`) が設定されていて、その上で親要素に `display: flex` が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。`inline-block` やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。 -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+次の例では、子要素は浮動設定されており、コンテナーには `display: flex` が設定されています。`display: flex` を削除すると、解除が適用されていないため `.box` が折りたたまれます。再度 `display: flex` を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。 -

フレックスボックとグリッドレイアウト

+{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}} -

CSS グリッドレイアウトとフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている flex プロパティは無視されるようになります。

+## フレックスボックとグリッドレイアウト -

ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。

+[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている `flex` プロパティは無視されるようになります。 -

フレックスとグリッドの違いは？

+ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。 -

フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜ所々同じことをしているように見える２つの仕様がわざわざあるのか？というのはよくある疑問です。

+### フレックスとグリッドの違いは？ -

この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。スペースの分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。

+フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜところどころ同じことをしているように見える 2 つの仕様がわざわざあるのか？というのはよくある疑問です。 -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。余白の分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。 -

同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。

+{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}} -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。 -

これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。

+{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}} -

場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。

+これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。 -

経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。

+場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。 -

グリッドとフレックスボックスのさらに詳しい比較については「グリッドレイアウトと他レイアウト方法との関係」の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。

+経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。 -

フレックスボックスと display: contents

+グリッドとフレックスボックスのさらに詳しい比較については「[グリッドレイアウトと他レイアウト方法との関係](/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout)」の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。 -

{{cssxref("display")}} プロパティの値 contents は、仕様書の中で以下のように述べられている新しい値です。

+## フレックスボックスと display: contents -
-

「要素自体はボックスを生成しませんが、その子要素や疑似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や疑似要素によって置き換えられたように扱わなければなりません」

+{{cssxref("display")}} プロパティの値 `contents` は、仕様書の中で以下のように述べられている新しい値です。 -

(訳注: https://www.w3.org/TR/css-display-3/#box-generation より引用)

-
+> 「要素自体はボックスを生成しませんが、その子要素や擬似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や擬似要素によって置き換えられたように扱わなければなりません」 +(訳注: [https://www.w3.org/TR/css-display-3/#box-generation](https://www.w3.org/TR/css-display-3/#box-generation) より引用) -

display のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。

+`display` のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。 -

以下の例では、フレックスコンテナーに３つの子要素があります。そのうちの１にはさらに２つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。

+以下の例では、フレックスコンテナーに 3 つの子要素があります。そのうちの 1 つにはさらに 2 つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。 -

ここで display: contents をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、２つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。display: contents を削除してみると元に戻ることを確認できます。

+ここで `display: contents` をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、2 つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。`display: contents` を削除してみると元に戻ることを確認できます。 -

レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。

+レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。 -
-

警告: display: contents を利用すると、要素がアクセシビリティツリーからも削除されます。 – 読み上げソフトは中身を見ず、 display: none を使用したのと同様になります。 contents は表示のためだけのものであり、コンテンツや要素ではありません。

-
+> **Warning:** 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します (ただし、子孫は残ります)。これにより、要素自体が画面リーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。[`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。 -

また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において display: contents を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。

+また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。 -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}} -

display:contents のブラウザー対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに display: contents をサポートしており、 Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。

+`display: contents` のブラウザーの対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに `display: contents` に対応しており、Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。 diff --git a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md index 4c3c468afc..621db78586 100644 --- a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md +++ b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -1,99 +1,100 @@ --- -title: フレックスボックスの典型的な使用例 +title: フレックスボックスの典型的な用途 slug: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox tags: - CSS - - Flexible Box - - Guide - - common uses - - flexbox + - フレックスボックス + - ガイド + - 用途 + - フレックスボックス - patterns translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox --- -

{{CSSRef}}

+{{CSSRef}} -

このガイドでは、フレックスボックスの一般的な使用例を紹介します。 — 他のレイアウト方法よりも適した使い方です。

+このガイドでは、フレックスボックスの一般的な使用例を紹介します。 — 他のレイアウト方法よりも適した使い方です。 -

なぜフレックスボックスを選ぶのか？

+## なぜフレックスボックスを選ぶのか？ -

ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては フレックスボックスと他のレイアウト方法の関係 をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。

+ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナーの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては [フレックスボックスと他のレイアウト方法の関係](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods) をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。 -

現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、Box Alignment がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。

+現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、Box Alignment がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。 - +## ナビゲーション -

ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。

+ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。 -

アイテムを水平に表示する際に、空白が必要になる場合があります。その空白をどうするか。2 つの選択肢があります。アイテムの外側に置く場合は、アイテム同士の間やアイテムの周囲に空白を配置することになります。アイテムの内側に入れる場合は、アイテムが空白を受け入れてサイズが広がるようにする方法が必要です。

+水平方向に表示したいアイテム群がある場合、空間が残ることがあります。この空間をどうするかを決めなければなりませんが、いくつかの選択肢があります。アイテムの外側に空間を表示して、アイテムの間や周囲に余白を設けるか、アイテムの内側に空間を吸収して、アイテムを伸長してこの空間を占めるようにするか、どちらかにする必要があります。 -

空白を外側に配置

+### アイテムの外側に空間を分配 -

アイテム間や周囲に空白を置くには、フレックスボックスの整列系のプロパティと {{cssxref("justify-content")}} プロパティを使います。このプロパティの詳細については フレックスコンテナにおけるアイテムの位置合わせ をご覧ください。そこでは、主軸 (横軸) でのアイテムの整列について説明しています。

+アイテムの間または周囲に空間を分配するには、フレックスボックスの配置プロパティと {{cssxref("justify-content")}} プロパティを使います。このプロパティの詳細については、[フレックスコンテナーにおけるアイテム配置](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)をご覧ください。そこでは、主軸 (横軸) におけるアイテムの配置について説明しています。 -

下記のライブサンプルでは、アイテムをそれぞれ本来のサイズで表示しています。また、justify-content: space-between によって、同じ幅の空白をアイテム同士の間に配置しています。値に space-around や、ブラウザーが対応している場合は space-evenly を指定することで、空白の配置方法を変えることができます。flex-start で空白をアイテム群の後ろに配置し、flex-end で空白をアイテム群の前に配置し、center でアイテム群をナビゲーションの中央に配置することもできます。

+下記のライブ例では、アイテムをそれぞれ本来の大きさで表示しています。また、`justify-content: space-between` によって、アイテム同士の間に同じ幅の余白を配置しています。値に `space-around` や、ブラウザーが対応している場合は `space-evenly` を指定することで、余白の配置方法を変えることができます。`flex-start` で余白をアイテム群の後ろに配置したり、`flex-end` で余白をアイテム群の前に配置したり、`center` でアイテム群をナビゲーションの中央に配置したりすることもできます。 -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}} -

空白を内側に配置

+### アイテムの内側に空間を分配 -

ナビゲーションでの別のパターンは、空白をアイテム同士の間ではなく、アイテム自身の内部に配置することです。この場合は、Flex アイテムを主軸に沿わせる時の制御割合 に書かれているように、{{cssxref("flex")}} プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮できます。

+ナビゲーションでのもう一つのパターンは、空間をアイテムの間ではなく、アイテム自身の内部に配置することです。この場合は、{{cssxref("flex")}} プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮することができます。[主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)に書かれている通りです。 -

ナビゲーションのアイテムの幅を同じにしたいなら、flex: auto を指定します。これは flex: 1 1 auto の短縮版です。すべてのアイテムは自動の flex-basis をもとに伸縮します。つまり、他よりも中身が多いアイテムは、占める領域も他より多くなります。

+ナビゲーションのアイテムの幅を同じにしたいなら、`flex: auto` を指定します。これは `flex: 1 1 auto` の一括指定です。すべてのアイテムは自動の flex-basis をもとに伸縮します。つまり、他よりも中身が多いアイテムは、占める空間も他より多くなります。 -

下記のライブサンプルの flex: auto を flex: 1 に変えてみてください。これは flex: 1 1 0 の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって領域が均等に配分されるからです。

+下記のライブサンプルの `flex: auto` を `flex: 1` に変えてみてください。これは `flex: 1 1 0` の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって空間が均等に分配されるからです。 -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}} -

ナビゲーションの分割

+## ナビゲーションの分割 -

主軸 (横軸) でアイテムを整列するもうひとつの方法は、自動マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。

+主軸 (横軸) でアイテムを整列するもうひとつの方法は、auto マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。 -

下記の例では、主軸上での位置合わせに auto マージンを使う に書かれている自動マージンの技法を使っています。アイテムは flex-start によって主軸上に揃えられます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に揃えられます。分割される地点を変えるには、CSSクラス "push-right" を別のアイテムに移してください。

+下記の例では、[主軸上での位置合わせのための_auto_マージンの使用](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#主軸上での位置合わせのための_auto_マージンの使用)に書かれている auto マージンの技法を使っています。アイテムは `flex-start` によって主軸上に配置されます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に配置されます。分割される位置を変更するには、CSS の "push-right" クラスを別のアイテムに移してください。 -

下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空白を作っています。また、フレックスコンテナにネガティブマージンを指定して、コンテナの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある gap プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。

+下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空間を作っています。また、フレックスコンテナーに負のマージンを指定して、コンテナーの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある `gap` プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。 -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}} -

アイテムの中央揃え

+## アイテムの中央揃え -

フレックスボックスの登場以前、開発者たちは「Webデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。今では、下記のライブサンプルのとおり、フレックスボックスの整列系のプロパティで簡単にできます。

+フレックスボックスの登場以前、開発者たちは「ウェブデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。下記のライブサンプルのとおり、フレックスボックスの配置プロパティを使用することで、簡単に解決できるようになりました。 -

下記のコード内の center の代わりに、先頭に揃える flex-start や末尾に揃える flex-end を指定して、整列の挙動を試してみてください。

+配置では、`flex-start` でアイテムを先頭に、`flex-end` で末尾に配置することができます。 -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}} -

将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナをフレックスコンテナとして扱ってフレックスコンテナに align-items を指定するか、フレックスアイテム自身に align-self を指定してください。

+将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナーを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナーをフレックスコンテナーとして扱ってフレックスコンテナーに `align-items` を指定するか、フレックスアイテム自身に `align-self` を指定してください。 - +## フッターが下端に張り付くカード -

フレックスボックスや CSS グリッドを使ってコンテナ内のカード状の部品を並べて配置する場合、それらの制御はコンテナの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッドエリアやフレックスコンテナの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。

+フレックスボックスや CSS グリッドを使ってコンテナー内のカード状の部品を並べて配置する場合、それらの制御はコンテナーの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッド領域やフレックスコンテナーの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。 -

Two card components showing that the internals of the component do not stretch with the wrapper.

+![2 枚のカード部品は、部品の内部がラッパーと一緒に伸びることはない。](flex-cards.png) -

フレックスボックスはこれを解決できます。カード自身もフレックスコンテナにして、{{cssxref("flex-direction")}}: column を指定します。そしてカードの本文エリアに flex: 1 を指定します。これは flex: 1 1 0 の短縮版です。アイテムは 0 の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文エリアだけの場合、本文エリアはフレックスコンテナ内の空白をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから flex プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。

+フレックスボックスはこれを解決できます。カード自身もフレックスコンテナーにして、{{cssxref("flex-direction")}}`: column` を指定します。そしてカードの本文領域に `flex: 1` を指定します。これは `flex: 1 1 0` の一括指定です。アイテムは `0` の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文領域だけの場合、本文領域はフレックスコンテナー内の空間をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから `flex` プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。 -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}} -

メディアオブジェクト

+## メディアオブジェクト -

メディアオブジェクトはWebデザインの一般的なパターンです。このパターンは画像などを左側に持ち、文章をもう右側に持ちます。理想的には、メディアオブジェクトを反転させて画像を左から右へ移すことができるようにすべきでしょう。

+メディアオブジェクトは、ウェブデザインでよく見られるパターンです。このパターンでは、画像やその他の要素が片側に、テキストが右側に配置されています。メディアオブジェクトは、反転させることができるのが理想です。すなわち、画像を左から右に移動することです。 -

このようなパターンはどこでも見かけます。コメント欄や、画像とその説明を表示する場合などです。フレックスボックスならば、メディアオブジェクトの画像エリアには画像の寸法そのままの領域を確保させて、余った領域はすべて文章エリアに使わせるという柔軟な指定ができます。

+このパターンは、コメント欄をはじめ、画像や説明を表示する必要がある場所でよく見られます。フレックスボックスを使用すると、画像を含むメディアオブジェクトの部分が画像から大きさを取得し、メディアオブジェクトの本文が残りの空間を確保するように拡大縮小します。 -

下記のライブサンプルはメディアオブジェクトの例です。整列系のプロパティを使ってアイテムを交差軸 (縦軸) の flex-start に揃えて、.content を指定したフレックスアイテムに flex: 1 を指定しています。先述のカード内の縦方向の配置と同じく、flex: 1 はその要素を引き伸ばせることを意味します。

+下のライブ例では、メディアオブジェクトが表示されています。配置プロパティを使用して、横軸のアイテムを `flex-start` に揃え、`.content` のフレックスアイテムを `flex: 1` に設定しています。前述のカラムレイアウトカードのパターンと同様に、`flex: 1` を使用することで、カードのこの部分を伸長させることができます。 -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}} -

下記のような、メディアオブジェクトの実用でよくある場面を、上記のライブサンプルで試してみたくなりませんか？

+このライブ例では、デザインの中でメディアオブジェクトを制約するさまざまな方法を試してみることができます。 -

画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像エリアのフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では flex-basis は auto なので、画像の {{cssxref("width")}} や max-width が flex-basis となります。

+画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像領域のフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では `flex-basis` は auto なので、画像の {{cssxref("width")}} や max-width が `flex-basis` となります。 -
.image img {
+```css
+.image img {
   max-width: 100px;
 }
-
+``` -

両方のエリアの比率を維持したまま伸縮させることもできます。両者に flex: 1 を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。両者の比率を中身の量で決めるために flex: auto を指定することもできます。その場合は、中身のサイズに応じて、または画像の width ようにフレックスアイテムに直接適用されるサイズに応じて伸縮します。

+両方の領域の比率を維持したまま伸縮させることもできます。両者に `flex: 1` を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。内容物を元に、両方とも `flex: auto` に設定すると、内容物の寸法や、画像の幅などフレックスアイテムに直接適用される大きさに合わせて拡大縮小することができます。 
.media .content {
   flex: 1;
@@ -104,39 +105,41 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
   flex: 1;
 }
-

両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像エリアには flex: 1、文章エリアには flex: 3 というように。これは、両者に 0 の flex-basis が適用されますが、指定された flex-grow に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、Flex アイテムを主軸に沿わせる時の制御割合 で詳しく説明されています。

+両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像領域には `flex: 1`、文章領域には `flex: 3` というように。これは、両者に `0` の `flex-basis` が適用されますが、指定された `flex-grow` に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、[主軸に沿ったフレックスアイテムの比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)で詳しく説明されています。 -
.media .content {
+```css
+.media .content {
   flex: 3;
   padding: 10px;
 }
 
 .image {
   flex: 1;
-}
+} +``` -

メディアオブジェクトを反転させる

+### メディアオブジェクトを反転させる -

画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、flex-direction プロパティに row-reverse を指定します。下記のライブサンプルでは、.flipped のクラスを .media の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。

+画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、`flex-direction` プロパティに `row-reverse` を指定します。下記のライブサンプルでは、`flipped` のクラスを `.media` の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。 -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}} -

フォームコントロール

+## フォームコントロール -

フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはマークアップと小さな要素がたくさんあり、それらを整列させたいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。

+フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはたくさんのマークアップや小さな要素があり、それらを配置したいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。 -

フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、枠線と display: flex を指定したラッパーの中に <button> と <input> フィールドを入れています。<input> フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。

+フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、`