From 76c96022ca053fb17e38e3025d4007361a40e924 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 1 Nov 2021 00:50:42 +0900 Subject: CSS フレックスボックス関係の文書の Markdown 変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../aligning_items_in_a_flex_container/index.html | 223 ---------------- .../aligning_items_in_a_flex_container/index.md | 223 ++++++++++++++++ .../backwards_compatibility_of_flexbox/index.html | 123 --------- .../backwards_compatibility_of_flexbox/index.md | 123 +++++++++ .../basic_concepts_of_flexbox/index.html | 237 ----------------- .../basic_concepts_of_flexbox/index.md | 237 +++++++++++++++++ .../index.html | 204 -------------- .../index.md | 204 ++++++++++++++ .../ja/web/css/css_flexible_box_layout/index.html | 118 --------- files/ja/web/css/css_flexible_box_layout/index.md | 118 +++++++++ .../mastering_wrapping_of_flex_items/index.html | 92 ------- .../mastering_wrapping_of_flex_items/index.md | 92 +++++++ .../ordering_flex_items/index.html | 144 ---------- .../ordering_flex_items/index.md | 144 ++++++++++ .../index.html | 137 ---------- .../index.md | 137 ++++++++++ .../typical_use_cases_of_flexbox/index.html | 142 ---------- .../typical_use_cases_of_flexbox/index.md | 142 ++++++++++ files/ja/web/css/flex-basis/index.html | 212 --------------- files/ja/web/css/flex-basis/index.md | 212 +++++++++++++++ files/ja/web/css/flex-direction/index.html | 156 ----------- files/ja/web/css/flex-direction/index.md | 156 +++++++++++ files/ja/web/css/flex-flow/index.html | 90 ------- files/ja/web/css/flex-flow/index.md | 90 +++++++ files/ja/web/css/flex-grow/index.html | 134 ---------- files/ja/web/css/flex-grow/index.md | 134 ++++++++++ files/ja/web/css/flex-wrap/index.html | 156 ----------- files/ja/web/css/flex-wrap/index.md | 156 +++++++++++ files/ja/web/css/flex/index.html | 292 --------------------- files/ja/web/css/flex/index.md | 292 +++++++++++++++++++++ files/ja/web/css/order/index.html | 111 -------- files/ja/web/css/order/index.md | 111 ++++++++ 32 files changed, 2571 insertions(+), 2571 deletions(-) delete mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md delete mode 100644 files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html create mode 100644 files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md delete mode 100644 files/ja/web/css/flex-basis/index.html create mode 100644 files/ja/web/css/flex-basis/index.md delete mode 100644 files/ja/web/css/flex-direction/index.html create mode 100644 files/ja/web/css/flex-direction/index.md delete mode 100644 files/ja/web/css/flex-flow/index.html create mode 100644 files/ja/web/css/flex-flow/index.md delete mode 100644 files/ja/web/css/flex-grow/index.html create mode 100644 files/ja/web/css/flex-grow/index.md delete mode 100644 files/ja/web/css/flex-wrap/index.html create mode 100644 files/ja/web/css/flex-wrap/index.md delete mode 100644 files/ja/web/css/flex/index.html create mode 100644 files/ja/web/css/flex/index.md delete mode 100644 files/ja/web/css/order/index.html create mode 100644 files/ja/web/css/order/index.md (limited to 'files') diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html deleted file mode 100644 index 725f3b0e12..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -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}}

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- - - -

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

- -
-

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

-
- -

交差軸

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

次の例では、フレックスコンテナーには 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)}}

- -

主軸の変更

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

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

- -
-

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

-
- -

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

- -

主軸上での位置合わせ

- -

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

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

配置と書字方向

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

配置と flex-direction

- -

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

- -

次の例では、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)}}

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

関連情報

- - 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 new file mode 100644 index 0000000000..725f3b0e12 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -0,0 +1,223 @@ +--- +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}}

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +
+

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

+
+ +

交差軸

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

次の例では、フレックスコンテナーには 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)}}

+ +

主軸の変更

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

主軸上での位置合わせ

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

配置と書字方向

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

配置と flex-direction

+ +

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

+ +

次の例では、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)}}

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html deleted file mode 100644 index a93b005b5c..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: フレックスボックスの後方互換性 -slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox -tags: - - '@supports' - - CSS - - CSS Tables - - Flexible Boxes - - Floats - - Guide - - fallbacks - - feature queries - - flexbox - - inline-block -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox ---- -
{{CSSRef}}
- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

ブラウザーの状況

- -

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

- - - -

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

- -

よくある問題

- -

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

- -

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

- -
.wrapper {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
- -

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

- -

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

- -

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

- -

浮動アイテム

- -
-

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

-
- -

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

- -

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

- -

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

- -

display: inline-block

- -

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

- -

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

- -

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

- -

display: table-

- -

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

- -

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

- -

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

- -
-

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

-
- -

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

- -

vertical-align プロパティ

- -

下記のライブサンプルでは、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)}}

- -

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

- -

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

- -
@supports (display: flex) {
-  // 対応しているブラウザー向けのコード
-}
- -

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

- -
@supports (display: flex) or (display: -webkit-box) {
-  // 対応しているブラウザー向けのコード
-}
- -

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

- -

終わりに

- -

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

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 new file mode 100644 index 0000000000..a93b005b5c --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md @@ -0,0 +1,123 @@ +--- +title: フレックスボックスの後方互換性 +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +tags: + - '@supports' + - CSS + - CSS Tables + - Flexible Boxes + - Floats + - Guide + - fallbacks + - feature queries + - flexbox + - inline-block +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +
{{CSSRef}}
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

ブラウザーの状況

+ +

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

+ + + +

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

+ +

よくある問題

+ +

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

+ +

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

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

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

+ +

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

+ +

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

+ +

浮動アイテム

+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ +

display: inline-block

+ +

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

+ +

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

+ +

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

+ +

display: table-

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

vertical-align プロパティ

+ +

下記のライブサンプルでは、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)}}

+ +

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

+ +

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

+ +
@supports (display: flex) {
+  // 対応しているブラウザー向けのコード
+}
+ +

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

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // 対応しているブラウザー向けのコード
+}
+ +

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

+ +

終わりに

+ +

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

diff --git a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html deleted file mode 100644 index d73d12b7d4..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,237 +0,0 @@ ---- -title: フレックスボックスの基本概念 -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}}
- -

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

- -

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

- -

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

- -

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

- -

主軸

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

交差軸

- -

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

- -

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

- -

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

- -

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

- -

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

- -

行の先頭と末尾

- -

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

- -

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

- -

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

- -

英語の場合、先頭は左

- -

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

- -

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

- -

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

- -

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

- -

フレックスコンテナー

- -

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

- - - -

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

- -

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

- -

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

- -

flex-direction の変更

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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 に変更してみてください。

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

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

- -

flex-basis プロパティ

- -

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

- -

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

- -

flex-grow プロパティ

- -

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

- -

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

- -

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

- -

flex-shrink プロパティ

- -

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

- -

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

- -
-

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

-
- -

flex プロパティの一括指定

- -

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

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

align-items

- -

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

- -

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

- -

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

- - - -

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

- -

justify-content

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

次のステップ

- -

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

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 new file mode 100644 index 0000000000..d73d12b7d4 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md @@ -0,0 +1,237 @@ +--- +title: フレックスボックスの基本概念 +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}}
+ +

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

+ +

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

+ +

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

+ +

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

+ +

主軸

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

交差軸

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

行の先頭と末尾

+ +

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

+ +

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

+ +

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

+ +

英語の場合、先頭は左

+ +

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

+ +

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

+ +

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

+ +

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

+ +

フレックスコンテナー

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

flex-direction の変更

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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 に変更してみてください。

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

flex-basis プロパティ

+ +

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

+ +

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

+ +

flex-grow プロパティ

+ +

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

+ +

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

+ +

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

+ +

flex-shrink プロパティ

+ +

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

+ +

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

+ +
+

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

+
+ +

flex プロパティの一括指定

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

align-items

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

justify-content

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

次のステップ

+ +

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

diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html deleted file mode 100644 index 379eb2ab8d..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: 主軸に沿ったフレックスアイテムの比率の制御 -slug: >- - Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax -tags: - - Basis - - CSS - - Flex - - Guide - - flexbox - - free space - - grow - - max-content - - min-content - - shrink - - space -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax ---- -
{{CSSRef}}
- -

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

- -

最初に見てみる

- -

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

- - - -

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

- -
.item {
-  flex: 2 1 auto;
-}
- -

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

- -

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

- -

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.

- -

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.

- -

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.

- -

{{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.

- -

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

- -

正と負のフリースペース

- -

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.

- -

Image showing space left over after items have been displayed.

- -

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.

- -

The items overflow the container

- -

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.

- -

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.

- -

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.

- -

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.

- -

{{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.

- -

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

- -

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 と 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: 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:

- -

Images shows the positive free space as a hatched area

- -

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:

- -

The positive space is distributed between items

- -

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

- -

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.

- -

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

- -

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

- -

アイテムに別の 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:

- - - -

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.

- -

{{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.

- -

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.

- -

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.

- -

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

- -

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.

- -

{{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 と 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.

- -

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:

- -
-

“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.

- -

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.

- -

{{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 要素を与える

- -

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.

- -

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.

- -

{{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. -
- -

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

- -

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

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

- -

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.

- -

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/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 new file mode 100644 index 0000000000..379eb2ab8d --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md @@ -0,0 +1,204 @@ +--- +title: 主軸に沿ったフレックスアイテムの比率の制御 +slug: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +tags: + - Basis + - CSS + - Flex + - Guide + - flexbox + - free space + - grow + - max-content + - min-content + - shrink + - space +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax +--- +
{{CSSRef}}
+ +

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

+ +

最初に見てみる

+ +

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

+ + + +

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

+ +
.item {
+  flex: 2 1 auto;
+}
+ +

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

+ +

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

+ +

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.

+ +

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.

+ +

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.

+ +

{{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.

+ +

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

+ +

正と負のフリースペース

+ +

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.

+ +

Image showing space left over after items have been displayed.

+ +

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.

+ +

The items overflow the container

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

{{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.

+ +

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

+ +

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 と 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: 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:

+ +

Images shows the positive free space as a hatched area

+ +

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:

+ +

The positive space is distributed between items

+ +

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

+ +

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.

+ +

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

+ +

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

+ +

アイテムに別の 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:

+ + + +

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.

+ +

{{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.

+ +

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.

+ +

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.

+ +

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

+ +

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.

+ +

{{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 と 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.

+ +

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:

+ +
+

“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.

+ +

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.

+ +

{{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 要素を与える

+ +

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.

+ +

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.

+ +

{{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. +
+ +

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

+ +

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. +
+ +

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

+ +

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.

+ +

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.html b/files/ja/web/css/css_flexible_box_layout/index.html deleted file mode 100644 index efe2e9fa39..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: CSS フレックスボックスレイアウト -slug: Web/CSS/CSS_Flexible_Box_Layout -tags: - - CSS - - CSS Flexible Boxes - - Guide - - Overview - - Reference - - flexbox -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
-
コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧
-
ブラウザーに依存しないフレックスボックスのミックスイン
-
この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。
-
diff --git a/files/ja/web/css/css_flexible_box_layout/index.md b/files/ja/web/css/css_flexible_box_layout/index.md new file mode 100644 index 0000000000..efe2e9fa39 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/index.md @@ -0,0 +1,118 @@ +--- +title: CSS フレックスボックスレイアウト +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - Guide + - Overview + - Reference + - flexbox +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
+
コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧
+
ブラウザーに依存しないフレックスボックスのミックスイン
+
この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。
+
diff --git a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html deleted file mode 100644 index 6841280981..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: フレックスアイテムの折り返しのマスター -slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items ---- -

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

- -

折り返しを行う

- -

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.

- -

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

- -

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/column-wrap.html", '100%', 810)}}

- -

折り返しと flex-direction

- -

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.

- -

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

- -

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!

- -

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

- -

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.

- -

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

- -

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.

- -

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

- -

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.

- -

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

- -

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.

- -

アイテム間の溝の作成

- -

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.

- -

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

- -

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

-
- -

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.

- -

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.

- -
-

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

-
- -

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

- -

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.

- -

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)}}

- -

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.

- -

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.

- -

{{CSSRef}}

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 new file mode 100644 index 0000000000..6841280981 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -0,0 +1,92 @@ +--- +title: フレックスアイテムの折り返しのマスター +slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items +--- +

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

+ +

折り返しを行う

+ +

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.

+ +

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

+ +

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/column-wrap.html", '100%', 810)}}

+ +

折り返しと flex-direction

+ +

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.

+ +

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

+ +

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!

+ +

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

+ +

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.

+ +

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

+ +

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.

+ +

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

+ +

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.

+ +

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

+ +

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.

+ +

アイテム間の溝の作成

+ +

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.

+ +

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

+ +

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

+
+ +

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.

+ +

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.

+ +
+

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

+
+ +

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

+ +

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.

+ +

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)}}

+ +

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.

+ +

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.

+ +

{{CSSRef}}

diff --git a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html deleted file mode 100644 index 8a2a488baa..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -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}}

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -
-

“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 より引用)

-
- -

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

- -

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

- -
-

“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.”

- -

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

-
- -
-

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

-
- -

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

- -

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

- -

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

- -

order プロパティ

- -

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

- -

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

- -

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

- - - -

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

- - - -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- - - -

order の利用場面

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

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 new file mode 100644 index 0000000000..8a2a488baa --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -0,0 +1,144 @@ +--- +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}}

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

“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 より引用)

+
+ +

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

+ +

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

+ +
+

“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.”

+ +

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

+
+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ +

order プロパティ

+ +

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

+ +

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

+ +

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

+ + + +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

order の利用場面

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html deleted file mode 100644 index 7ec4dbc572..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: フレックスボックスと他のレイアウト方法の関係 -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 - - フレックスボックス - - ボックス配置 - - 書字方向 -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 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。

-
- -

ボックス配置モジュール

- -

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

- -

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

- -

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

- -
-

メモ: 配置のためのプロパティは 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 より引用)

-
- -

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

- -

gap プロパティ

- -

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

- -

書字方向

- -

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

- -

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

- -

書字方向

- -

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

- - - -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -

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

- -
-

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

- -

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

-
- -

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

- -

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

- -

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

- -

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

- -
-

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

-
- -

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

- -

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

- -

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

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 new file mode 100644 index 0000000000..7ec4dbc572 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -0,0 +1,137 @@ +--- +title: フレックスボックスと他のレイアウト方法の関係 +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 + - フレックスボックス + - ボックス配置 + - 書字方向 +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 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。

+
+ +

ボックス配置モジュール

+ +

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

+ +

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

+ +

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

+ +
+

メモ: 配置のためのプロパティは 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 より引用)

+
+ +

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

+ +

gap プロパティ

+ +

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

+ +

書字方向

+ +

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

+ +

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

+ +

書字方向

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+ +

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

+
+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

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

diff --git a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html deleted file mode 100644 index 4c3c468afc..0000000000 --- a/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -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}}

- -

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

- -

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

- -

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

- -

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

- - - -

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

- -

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

- -

空白を外側に配置

- -

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

- -

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

- -

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

- -

空白を内側に配置

- -

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

- -

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

- -

下記のライブサンプルの flex: auto を flex: 1 に変えてみてください。これは flex: 1 1 0 の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって領域が均等に配分されるからです。

- -

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

- -

ナビゲーションの分割

- -

主軸 (横軸) でアイテムを整列するもうひとつの方法は、自動マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。

- -

下記の例では、主軸上での位置合わせに auto マージンを使う に書かれている自動マージンの技法を使っています。アイテムは flex-start によって主軸上に揃えられます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に揃えられます。分割される地点を変えるには、CSSクラス "push-right" を別のアイテムに移してください。

- -

下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空白を作っています。また、フレックスコンテナにネガティブマージンを指定して、コンテナの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある gap プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。

- -

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

- -

アイテムの中央揃え

- -

フレックスボックスの登場以前、開発者たちは「Webデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。今では、下記のライブサンプルのとおり、フレックスボックスの整列系のプロパティで簡単にできます。

- -

下記のコード内の center の代わりに、先頭に揃える flex-start や末尾に揃える flex-end を指定して、整列の挙動を試してみてください。

- -

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

- -

将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナをフレックスコンテナとして扱ってフレックスコンテナに align-items を指定するか、フレックスアイテム自身に align-self を指定してください。

- - - -

フレックスボックスや CSS グリッドを使ってコンテナ内のカード状の部品を並べて配置する場合、それらの制御はコンテナの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッドエリアやフレックスコンテナの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。

- -

Two card components showing that the internals of the component do not stretch with the wrapper.

- -

フレックスボックスはこれを解決できます。カード自身もフレックスコンテナにして、{{cssxref("flex-direction")}}: column を指定します。そしてカードの本文エリアに flex: 1 を指定します。これは flex: 1 1 0 の短縮版です。アイテムは 0 の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文エリアだけの場合、本文エリアはフレックスコンテナ内の空白をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから flex プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。

- -

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

- -

メディアオブジェクト

- -

メディアオブジェクトはWebデザインの一般的なパターンです。このパターンは画像などを左側に持ち、文章をもう右側に持ちます。理想的には、メディアオブジェクトを反転させて画像を左から右へ移すことができるようにすべきでしょう。

- -

このようなパターンはどこでも見かけます。コメント欄や、画像とその説明を表示する場合などです。フレックスボックスならば、メディアオブジェクトの画像エリアには画像の寸法そのままの領域を確保させて、余った領域はすべて文章エリアに使わせるという柔軟な指定ができます。

- -

下記のライブサンプルはメディアオブジェクトの例です。整列系のプロパティを使ってアイテムを交差軸 (縦軸) の flex-start に揃えて、.content を指定したフレックスアイテムに flex: 1 を指定しています。先述のカード内の縦方向の配置と同じく、flex: 1 はその要素を引き伸ばせることを意味します。

- -

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

- -

下記のような、メディアオブジェクトの実用でよくある場面を、上記のライブサンプルで試してみたくなりませんか？

- -

画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像エリアのフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では flex-basis は auto なので、画像の {{cssxref("width")}} や max-width が flex-basis となります。

- -
.image img {
-  max-width: 100px;
-}
-
- -

両方のエリアの比率を維持したまま伸縮させることもできます。両者に flex: 1 を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。両者の比率を中身の量で決めるために flex: auto を指定することもできます。その場合は、中身のサイズに応じて、または画像の width ようにフレックスアイテムに直接適用されるサイズに応じて伸縮します。

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像エリアには flex: 1、文章エリアには flex: 3 というように。これは、両者に 0 の flex-basis が適用されますが、指定された flex-grow に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、Flex アイテムを主軸に沿わせる時の制御割合 で詳しく説明されています。

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

メディアオブジェクトを反転させる

- -

画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、flex-direction プロパティに row-reverse を指定します。下記のライブサンプルでは、.flipped のクラスを .media の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

フォームコントロール

- -

フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはマークアップと小さな要素がたくさんあり、それらを整列させたいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。

- -

フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、枠線と display: flex を指定したラッパーの中に <button> と <input> フィールドを入れています。<input> フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。

- -

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

- -

ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。

- -

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

- -

このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。

- -

終わりに

- -

上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。

- -

コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。

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 new file mode 100644 index 0000000000..4c3c468afc --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -0,0 +1,142 @@ +--- +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}}

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

空白を外側に配置

+ +

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

+ +

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

+ +

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

+ +

空白を内側に配置

+ +

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

+ +

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

+ +

下記のライブサンプルの flex: auto を flex: 1 に変えてみてください。これは flex: 1 1 0 の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって領域が均等に配分されるからです。

+ +

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

+ +

ナビゲーションの分割

+ +

主軸 (横軸) でアイテムを整列するもうひとつの方法は、自動マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。

+ +

下記の例では、主軸上での位置合わせに auto マージンを使う に書かれている自動マージンの技法を使っています。アイテムは flex-start によって主軸上に揃えられます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に揃えられます。分割される地点を変えるには、CSSクラス "push-right" を別のアイテムに移してください。

+ +

下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空白を作っています。また、フレックスコンテナにネガティブマージンを指定して、コンテナの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある gap プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。

+ +

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

+ +

アイテムの中央揃え

+ +

フレックスボックスの登場以前、開発者たちは「Webデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。今では、下記のライブサンプルのとおり、フレックスボックスの整列系のプロパティで簡単にできます。

+ +

下記のコード内の center の代わりに、先頭に揃える flex-start や末尾に揃える flex-end を指定して、整列の挙動を試してみてください。

+ +

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

+ +

将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナをフレックスコンテナとして扱ってフレックスコンテナに align-items を指定するか、フレックスアイテム自身に align-self を指定してください。

+ + + +

フレックスボックスや CSS グリッドを使ってコンテナ内のカード状の部品を並べて配置する場合、それらの制御はコンテナの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッドエリアやフレックスコンテナの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。

+ +

Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

フレックスボックスはこれを解決できます。カード自身もフレックスコンテナにして、{{cssxref("flex-direction")}}: column を指定します。そしてカードの本文エリアに flex: 1 を指定します。これは flex: 1 1 0 の短縮版です。アイテムは 0 の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文エリアだけの場合、本文エリアはフレックスコンテナ内の空白をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから flex プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。

+ +

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

+ +

メディアオブジェクト

+ +

メディアオブジェクトはWebデザインの一般的なパターンです。このパターンは画像などを左側に持ち、文章をもう右側に持ちます。理想的には、メディアオブジェクトを反転させて画像を左から右へ移すことができるようにすべきでしょう。

+ +

このようなパターンはどこでも見かけます。コメント欄や、画像とその説明を表示する場合などです。フレックスボックスならば、メディアオブジェクトの画像エリアには画像の寸法そのままの領域を確保させて、余った領域はすべて文章エリアに使わせるという柔軟な指定ができます。

+ +

下記のライブサンプルはメディアオブジェクトの例です。整列系のプロパティを使ってアイテムを交差軸 (縦軸) の flex-start に揃えて、.content を指定したフレックスアイテムに flex: 1 を指定しています。先述のカード内の縦方向の配置と同じく、flex: 1 はその要素を引き伸ばせることを意味します。

+ +

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

+ +

下記のような、メディアオブジェクトの実用でよくある場面を、上記のライブサンプルで試してみたくなりませんか？

+ +

画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像エリアのフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では flex-basis は auto なので、画像の {{cssxref("width")}} や max-width が flex-basis となります。

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

両方のエリアの比率を維持したまま伸縮させることもできます。両者に flex: 1 を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。両者の比率を中身の量で決めるために flex: auto を指定することもできます。その場合は、中身のサイズに応じて、または画像の width ようにフレックスアイテムに直接適用されるサイズに応じて伸縮します。

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像エリアには flex: 1、文章エリアには flex: 3 というように。これは、両者に 0 の flex-basis が適用されますが、指定された flex-grow に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、Flex アイテムを主軸に沿わせる時の制御割合 で詳しく説明されています。

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

メディアオブジェクトを反転させる

+ +

画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、flex-direction プロパティに row-reverse を指定します。下記のライブサンプルでは、.flipped のクラスを .media の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

フォームコントロール

+ +

フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはマークアップと小さな要素がたくさんあり、それらを整列させたいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。

+ +

フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、枠線と display: flex を指定したラッパーの中に <button> と <input> フィールドを入れています。<input> フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。

+ +

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

+ +

ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。

+ +

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

+ +

このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。

+ +

終わりに

+ +

上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。

+ +

コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。

diff --git a/files/ja/web/css/flex-basis/index.html b/files/ja/web/css/flex-basis/index.html deleted file mode 100644 index 7be7d71aab..0000000000 --- a/files/ja/web/css/flex-basis/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: flex-basis -slug: Web/CSS/flex-basis -tags: - - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/flex-basis ---- -
{{CSSRef}}
- -

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

- -
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
- - - -
-

メモ: (auto 以外の) flex-basis と width (または flex-direction: column の場合は height) の両方が要素に設定されていた場合、 flex-basis が優先されます。

-
- -

構文

- -
/* 幅を指定する */
-flex-basis: 10em;
-flex-basis: 3px;
-flex-basis: auto;
-
-/* 固有のサイズ指定キーワード */
-flex-basis: fill;
-flex-basis: max-content;
-flex-basis: min-content;
-flex-basis: fit-content;
-
-/* フレックスアイテムの内容物に基づいて自動設定する */
-flex-basis: content;
-
-/* グローバル値 */
-flex-basis: inherit;
-flex-basis: initial;
-flex-basis: unset;
-
- -

flex-basis プロパティは、content キーワードまたは <'width'> で指定します。

- -

値

- -
-
<'width'>
-
絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの main size に対する {{cssxref("<percentage>")}}、あるいは auto キーワードで定義します。負の値は不正です。既定値は auto です。
-
content
-
flex アイテムの内容物に基づいて、自動的にサイズを決めます。
-
-
メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を auto にするのと合わせて auto を使用することで、同等の効果を得られます。
- -
-

経緯:

- -
    -
  • 元々、flex-basis:auto は "自身の width または height プロパティを参照する" ことを意味していました。
    • -
  • その後 flex-basis:auto の意味が自動サイズ設定に変わり、また "自身の width または height プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。
    • -
  • さらに、この変更が {{bug("1093316")}} で戻されて auto が再び "自身の width または height プロパティを参照する" になり、自動サイズ設定を行うための content キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。
    • -
-
-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

フレックスアイテムの初期の寸法の設定

- -

HTML

- -
<ul class="container">
-  <li class="flex flex1">1: flex-basis test</li>
-  <li class="flex flex2">2: flex-basis test</li>
-  <li class="flex flex3">3: flex-basis test</li>
-  <li class="flex flex4">4: flex-basis test</li>
-  <li class="flex flex5">5: flex-basis test</li>
-</ul>
-
-<ul class="container">
-  <li class="flex flex6">6: flex-basis test</li>
-</ul>
-
- -

CSS

- -
.container {
-  font-family: arial, sans-serif;
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.flex {
-  background: #6AB6D8;
-  padding: 10px;
-  margin-bottom: 50px;
-  border: 3px solid #2E86BB;
-  color: white;
-  font-size: 14px;
-  text-align: center;
-  position: relative;
-}
-
-.flex:after {
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  top: 100%;
-  margin-top: 10px;
-  width: 100%;
-  color: #333;
-  font-size: 12px;
-}
-
-.flex1 {
-  flex-basis: auto;
-}
-
-.flex1:after {
-  content: 'auto';
-}
-
-.flex2 {
-  flex-basis: max-content;
-}
-
-.flex2:after {
-  content: 'max-content';
-}
-
-.flex3 {
-  flex-basis: min-content;
-}
-
-.flex3:after {
-  content: 'min-content';
-}
-
-.flex4 {
-  flex-basis: fit-content;
-}
-
-.flex4:after {
-  content: 'fit-content';
-}
-
-.flex5 {
-   flex-basis: content;
-}
-
-.flex5:after {
-  content: 'content';
-}
-
-.flex6 {
-  flex-basis: fill;
-}
-
-.flex6:after {
-  content: 'fill';
-}
-
- -

結果

- -

{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}

- -

仕様書

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

ブラウザーの互換性

- -

{{Compat("css.properties.flex-basis")}}

- -

関連情報

- - diff --git a/files/ja/web/css/flex-basis/index.md b/files/ja/web/css/flex-basis/index.md new file mode 100644 index 0000000000..7be7d71aab --- /dev/null +++ b/files/ja/web/css/flex-basis/index.md @@ -0,0 +1,212 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ + + +
+

メモ: (auto 以外の) flex-basis と width (または flex-direction: column の場合は height) の両方が要素に設定されていた場合、 flex-basis が優先されます。

+
+ +

構文

+ +
/* 幅を指定する */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 固有のサイズ指定キーワード */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* フレックスアイテムの内容物に基づいて自動設定する */
+flex-basis: content;
+
+/* グローバル値 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

flex-basis プロパティは、content キーワードまたは <'width'> で指定します。

+ +

値

+ +
+
<'width'>
+
絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの main size に対する {{cssxref("<percentage>")}}、あるいは auto キーワードで定義します。負の値は不正です。既定値は auto です。
+
content
+
flex アイテムの内容物に基づいて、自動的にサイズを決めます。
+
+
メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を auto にするのと合わせて auto を使用することで、同等の効果を得られます。
+ +
+

経緯:

+ +
    +
  • 元々、flex-basis:auto は "自身の width または height プロパティを参照する" ことを意味していました。
    • +
  • その後 flex-basis:auto の意味が自動サイズ設定に変わり、また "自身の width または height プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。
    • +
  • さらに、この変更が {{bug("1093316")}} で戻されて auto が再び "自身の width または height プロパティを参照する" になり、自動サイズ設定を行うための content キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。
    • +
+
+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フレックスアイテムの初期の寸法の設定

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 14px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 12px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.flex-basis")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-direction/index.html b/files/ja/web/css/flex-direction/index.html deleted file mode 100644 index 8e6f817697..0000000000 --- a/files/ja/web/css/flex-direction/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: flex-direction -slug: Web/CSS/flex-direction -tags: - - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/flex-direction ---- -
{{CSSRef}}
- -

flex-direction は CSS のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。

- -
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
- - - -

なお、 row および row-reverse の値は、フレックスコンテナーの書字方向に影響されます。 {{HTMLAttrxRef("dir")}} 属性が ltr である場合は、 row は左から右へ向かう水平軸を表し、また row-reverse は右から左へ向かう水平軸を表します。一方、 dir 属性が rtl である場合は、 row は右から左へ向かう水平軸を表し、また row-reverse は左から右へ向かう水平軸を表します。

- -

構文

- -
/* 行のテキストの方向に配置 */
-flex-direction: row;
-
-/* <row> と同様だが、逆向き */
-flex-direction: row-reverse;
-
-/* 積み重なるように配置する */
-flex-direction: column;
-
-/* <column> と同様だが、逆向き */
-flex-direction: column-reverse;
-
-/* グローバル値 */
-flex-direction: inherit;
-flex-direction: initial;
-flex-direction: unset;
-
- -

値

- -

以下の値を指定できます。

- -
-
row
-
フレックスコンテナーの主軸は、書字方向と同じに定義されます。 main-start および main-end の位置は、コンテンツの書字方向と同様になります。
-
row-reverse
-
row と同様ですが、main-start および main-end の位置が入れ替わります。
-
column
-
フレックスコンテナーの主軸は、ブロック軸と同じになります。 main-start および main-end の位置は、 writing-mode における before および after の位置と同じになります。
-
column-reverse
-
column と同様ですが、 main-start および main-end の位置が入れ替わります。
-
- -

アクセシビリティの考慮

- -

flex-direction プロパティを row-reverse または column-reverse の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

フレックスコンテナーの列と行の反転

- -

HTML

- -
<h4>This is a Column-Reverse</h4>
-<div id="content">
-  <div class="box" style="background-color:red;">A</div>
-  <div class="box" style="background-color:lightblue;">B</div>
-  <div class="box" style="background-color:yellow;">C</div>
-</div>
-<h4>This is a Row-Reverse</h4>
-<div id="content1">
-  <div class="box1" style="background-color:red;">A</div>
-  <div class="box1" style="background-color:lightblue;">B</div>
-  <div class="box1" style="background-color:yellow;">C</div>
-</div>
-
- -

CSS

- -
#content {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-.box {
-  width: 50px;
-  height: 50px;
-}
-
-#content1 {
-  width: 200px;
-  height: 200px;
-  border: 1px solid #c3c3c3;
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.box1 {
-  width: 50px;
-  height: 50px;
-}
- -

結果

- -

{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}

- -

仕様書

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

ブラウザーの互換性

- -

{{Compat("css.properties.flex-direction")}}

- -

関連情報

- - diff --git a/files/ja/web/css/flex-direction/index.md b/files/ja/web/css/flex-direction/index.md new file mode 100644 index 0000000000..8e6f817697 --- /dev/null +++ b/files/ja/web/css/flex-direction/index.md @@ -0,0 +1,156 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-direction +--- +
{{CSSRef}}
+ +

flex-direction は CSS のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定します。

+ +
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
+ + + +

なお、 row および row-reverse の値は、フレックスコンテナーの書字方向に影響されます。 {{HTMLAttrxRef("dir")}} 属性が ltr である場合は、 row は左から右へ向かう水平軸を表し、また row-reverse は右から左へ向かう水平軸を表します。一方、 dir 属性が rtl である場合は、 row は右から左へ向かう水平軸を表し、また row-reverse は左から右へ向かう水平軸を表します。

+ +

構文

+ +
/* 行のテキストの方向に配置 */
+flex-direction: row;
+
+/* <row> と同様だが、逆向き */
+flex-direction: row-reverse;
+
+/* 積み重なるように配置する */
+flex-direction: column;
+
+/* <column> と同様だが、逆向き */
+flex-direction: column-reverse;
+
+/* グローバル値 */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

値

+ +

以下の値を指定できます。

+ +
+
row
+
フレックスコンテナーの主軸は、書字方向と同じに定義されます。 main-start および main-end の位置は、コンテンツの書字方向と同様になります。
+
row-reverse
+
row と同様ですが、main-start および main-end の位置が入れ替わります。
+
column
+
フレックスコンテナーの主軸は、ブロック軸と同じになります。 main-start および main-end の位置は、 writing-mode における before および after の位置と同じになります。
+
column-reverse
+
column と同様ですが、 main-start および main-end の位置が入れ替わります。
+
+ +

アクセシビリティの考慮

+ +

flex-direction プロパティを row-reverse または column-reverse の値で使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フレックスコンテナーの列と行の反転

+ +

HTML

+ +
<h4>This is a Column-Reverse</h4>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>This is a Row-Reverse</h4>
+<div id="content1">
+  <div class="box1" style="background-color:red;">A</div>
+  <div class="box1" style="background-color:lightblue;">B</div>
+  <div class="box1" style="background-color:yellow;">C</div>
+</div>
+
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

結果

+ +

{{EmbedLiveSample('Reversing_flex_container_columns_and_rows', '', '550')}}

+ +

仕様書

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

ブラウザーの互換性

+ +

{{Compat("css.properties.flex-direction")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-flow/index.html b/files/ja/web/css/flex-flow/index.html deleted file mode 100644 index 4c77d70ed0..0000000000 --- a/files/ja/web/css/flex-flow/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: flex-flow -slug: Web/CSS/flex-flow -tags: - - CSS - - CSS フレックスボックス - - CSS プロパティ - - Reference - - 一括指定プロパティ -translation_of: Web/CSS/flex-flow ---- -
{{CSSRef}}
- -

CSS の flex-flow プロパティは、 {{cssxref("flex-direction")}} プロパティと {{cssxref("flex-wrap")}} プロパティの一括指定プロパティです。

- -
{{EmbedInteractiveExample("pages/css/flex-flow.html")}}
- - - -

構文

- -
/* flex-flow: <'flex-direction'> */
-flex-flow: row;
-flex-flow: row-reverse;
-flex-flow: column;
-flex-flow: column-reverse;
-
-/* flex-flow: <'flex-wrap'> */
-flex-flow: nowrap;
-flex-flow: wrap;
-flex-flow: wrap-reverse;
-
-/* flex-flow: <'flex-direction'> および <'flex-wrap'> */
-flex-flow: row nowrap;
-flex-flow: column wrap;
-flex-flow: column-reverse wrap-reverse;
-
-/* グローバル値 */
-flex-flow: inherit;
-flex-flow: initial;
-flex-flow: unset;
-
- -

値

- -

値に関して詳しくは、 {{cssxref("flex-direction")}} および {{cssxref("flex-wrap")}} をご覧ください。

- -

形式文法

- -{{csssyntax}} - -

例

- -
element {
-  /* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */
-  flex-flow: column-reverse wrap;
-}
-
- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.flex-flow")}}

- -

関連情報

- - diff --git a/files/ja/web/css/flex-flow/index.md b/files/ja/web/css/flex-flow/index.md new file mode 100644 index 0000000000..4c77d70ed0 --- /dev/null +++ b/files/ja/web/css/flex-flow/index.md @@ -0,0 +1,90 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - Reference + - 一括指定プロパティ +translation_of: Web/CSS/flex-flow +--- +
{{CSSRef}}
+ +

CSS の flex-flow プロパティは、 {{cssxref("flex-direction")}} プロパティと {{cssxref("flex-wrap")}} プロパティの一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/flex-flow.html")}}
+ + + +

構文

+ +
/* flex-flow: <'flex-direction'> */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: <'flex-wrap'> */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: <'flex-direction'> および <'flex-wrap'> */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* グローバル値 */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+
+ +

値

+ +

値に関して詳しくは、 {{cssxref("flex-direction")}} および {{cssxref("flex-wrap")}} をご覧ください。

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +
element {
+  /* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */
+  flex-flow: column-reverse wrap;
+}
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }}{{ Spec2('CSS3 Flexbox') }}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.flex-flow")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-grow/index.html b/files/ja/web/css/flex-grow/index.html deleted file mode 100644 index 5d75820101..0000000000 --- a/files/ja/web/css/flex-grow/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: flex-grow -slug: Web/CSS/flex-grow -tags: - - CSS - - CSS Flexible Boxes - - CSS Property - - NeedsContent - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/flex-grow ---- -
{{CSSRef}}
- -

flex-grow は CSS のプロパティで、フレックスアイテムの主軸方向の寸法のフレックス伸長係数を設定します。

- -
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
- - - -

構文

- -
/* <number> 値 */
-flex-grow: 3;
-flex-grow: 0.6;
-
-/* グローバル値 */
-flex-grow: inherit;
-flex-grow: initial;
-flex-grow: unset;
-
- -

flex-grow プロパティは単一の <number> として指定します。

- -

値

- -
-
<number>
-
{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は0です。
-
- -

解説

- -

このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。

- -

主軸方向の寸法は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。

- -

残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。

- -

使用するにあたって、 flex-grow は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。

- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

フレックスアイテムの伸長係数の設定

- -

HTML

- -
-
<h4>This is a Flex-Grow</h4>
-<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
-<div id="content">
-  <div class="box" style="background-color:red;">A</div>
-  <div class="box" style="background-color:lightblue;">B</div>
-  <div class="box" style="background-color:yellow;">C</div>
-  <div class="box1" style="background-color:brown;">D</div>
-  <div class="box1" style="background-color:lightgreen;">E</div>
-  <div class="box" style="background-color:brown;">F</div>
-</div>
-
- -

CSS

- -
#content {
-  display: flex;
-
-  justify-content: space-around;
-  flex-flow: row wrap;
-  align-items: stretch;
-}
-
-.box {
-  flex-grow: 1;
-  border: 3px solid rgba(0,0,0,.2);
-}
-
-.box1 {
-  flex-grow: 2;
-  border: 3px solid rgba(0,0,0,.2);
-}
-
-
- -

結果

- -

{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}}

- -

仕様書

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

ブラウザーの互換性

- -

{{Compat("css.properties.flex-grow")}}

- -

関連情報

- - diff --git a/files/ja/web/css/flex-grow/index.md b/files/ja/web/css/flex-grow/index.md new file mode 100644 index 0000000000..5d75820101 --- /dev/null +++ b/files/ja/web/css/flex-grow/index.md @@ -0,0 +1,134 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - NeedsContent + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

flex-grow は CSS のプロパティで、フレックスアイテムの主軸方向の寸法のフレックス伸長係数を設定します。

+ +
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
+ + + +

構文

+ +
/* <number> 値 */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* グローバル値 */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

flex-grow プロパティは単一の <number> として指定します。

+ +

値

+ +
+
<number>
+
{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は0です。
+
+ +

解説

+ +

このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。

+ +

主軸方向の寸法は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。

+ +

残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。

+ +

使用するにあたって、 flex-grow は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

フレックスアイテムの伸長係数の設定

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

結果

+ +

{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.flex-grow")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex-wrap/index.html b/files/ja/web/css/flex-wrap/index.html deleted file mode 100644 index 405f21b733..0000000000 --- a/files/ja/web/css/flex-wrap/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: flex-wrap -slug: Web/CSS/flex-wrap -tags: - - CSS - - CSS フレックスボックス - - CSS プロパティ - - Reference -translation_of: Web/CSS/flex-wrap ---- -
{{ CSSRef}}
- -

CSS の flex-wrap プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

- -
{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
- - - -

他のプロパティや詳細情報については CSS フレックスボックスの利用をご覧ください。

- -

構文

- -
flex-wrap: nowrap; /* 既定値 */
-flex-wrap: wrap;
-flex-wrap: wrap-reverse;
-
-/* グローバル値 */
-flex-wrap: inherit;
-flex-wrap: initial;
-flex-wrap: unset;
-
- -

flex-wrap プロパティは次の値のリストから選択した単一のキーワードで指定します。

- -

値

- -

以下の値を利用することができます。

- -
-
nowrap
-
フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 cross-start は、 {{cssxref("flex-direction")}} の値に応じて start または before と同一になります。
-
wrap
-
フレックスアイテムは複数行に分割されます。 cross-start は flex-direction の値に応じて start または before と同一になり、 cross-end は、指定された cross-start の反対側になります。
-
wrap-reverse
-
wrap と同様に動作しますが、 cross-start と cross-end が入れ替わります。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
-
<h4>This is an example for flex-wrap:wrap </h4>
-<div class="content">
-  <div class="red">1</div>
-  <div class="green">2</div>
-  <div class="blue">3</div>
-</div>
-<h4>This is an example for flex-wrap:nowrap </h4>
-<div class="content1">
-  <div class="red">1</div>
-  <div class="green">2</div>
-  <div class="blue">3</div>
-</div>
-<h4>This is an example for flex-wrap:wrap-reverse </h4>
-<div class="content2">
-  <div class="red">1</div>
-  <div class="green">2</div>
-  <div class="blue">3</div>
-</div>
-
- -

CSS

- -
/* Common Styles */
-.content,
-.content1,
-.content2 {
-    color: #fff;
-    font: 100 24px/100px sans-serif;
-    height: 150px;
-    text-align: center;
-}
-
-.content div,
-.content1 div,
-.content2 div {
-    height: 50%;
-    width: 50%;
-}
-.red {
-    background: orangered;
-}
-.green {
-    background: yellowgreen;
-}
-.blue {
-    background: steelblue;
-}
-
-/* Flexbox Styles */
-.content {
-    display: flex;
-    flex-wrap: wrap;
-}
-.content1 {
-    display: flex;
-    flex-wrap: nowrap;
-}
-.content2 {
-    display: flex;
-    flex-wrap: wrap-reverse;
-}
-
-
-
- -

結果

- -

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.flex-wrap")}}

- -

関連情報

- - diff --git a/files/ja/web/css/flex-wrap/index.md b/files/ja/web/css/flex-wrap/index.md new file mode 100644 index 0000000000..405f21b733 --- /dev/null +++ b/files/ja/web/css/flex-wrap/index.md @@ -0,0 +1,156 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - Reference +translation_of: Web/CSS/flex-wrap +--- +
{{ CSSRef}}
+ +

CSS の flex-wrap プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

+ +
{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
+ + + +

他のプロパティや詳細情報については CSS フレックスボックスの利用をご覧ください。

+ +

構文

+ +
flex-wrap: nowrap; /* 既定値 */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* グローバル値 */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

flex-wrap プロパティは次の値のリストから選択した単一のキーワードで指定します。

+ +

値

+ +

以下の値を利用することができます。

+ +
+
nowrap
+
フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 cross-start は、 {{cssxref("flex-direction")}} の値に応じて start または before と同一になります。
+
wrap
+
フレックスアイテムは複数行に分割されます。 cross-start は flex-direction の値に応じて start または before と同一になり、 cross-end は、指定された cross-start の反対側になります。
+
wrap-reverse
+
wrap と同様に動作しますが、 cross-start と cross-end が入れ替わります。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
+
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.flex-wrap")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/flex/index.html b/files/ja/web/css/flex/index.html deleted file mode 100644 index 663452dca7..0000000000 --- a/files/ja/web/css/flex/index.html +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: flex -slug: Web/CSS/flex -tags: - - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-shorthand-property' -translation_of: Web/CSS/flex ---- -
{{CSSRef}}
- -

flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

- -
{{EmbedInteractiveExample("pages/css/flex.html")}}
- - - -

構成するプロパティ

- -

このプロパティは以下の CSS プロパティの一括指定です。

- - - -

構文

- -
/* キーワード値 */
-flex: auto;
-flex: initial;
-flex: none;
-
-/* 単位がない数値を1つ指定: flex-grow */
-flex: 2;
-
-/* 幅または高さを1つ指定: flex-basis */
-flex: 10em;
-flex: 30%;
-flex: min-content;
-
-/* 値を2つ指定: flex-grow | flex-basis */
-flex: 1 30px;
-
-/* 値を2つ指定: flex-grow | flex-shrink */
-flex: 2 2;
-
-/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
-flex: 2 2 10%;
-
-/* グローバル値 */
-flex: inherit;
-flex: initial;
-flex: unset;
-
- -

flex プロパティは1つ、2つ、3つの値を取ることがあります。

- - - -

値

- -
-
initial
-
アイテムは width および height プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "flex: 0 1 auto" と同等です。
-
auto
-
アイテムは width および height プロパティによって大きさが決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "flex: 1 1 auto" と同等です。
-
none
-
アイテムは width および height プロパティによって大きさが決められます。大きさは完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"flex: 0 0 auto" と同等です。
-
<'flex-grow'>
-
フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 0)
-
<'flex-shrink'>
-
フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 1)
-
<'flex-basis'>
-
フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが 0 ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は 1 です。 (初期値は auto)
-
- -

解説

- -

多くの場合、 flex には auto, initial, none, または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。

- -
- - - - -

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}

- -

既定ではフレックスアイテムは最小コンテンツサイズよりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。

-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

flex: auto の設定

- -

HTML

- -
<div id="flex-container">
-  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
-  <div class="raw-item" id="raw">Raw box</div>
-</div>
-
- -

CSS

- -
#flex-container {
-  display: flex;
-  flex-direction: row;
-}
-
-#flex-container > .flex-item {
-  flex: auto;
-}
-
-#flex-container > .raw-item {
-  width: 5rem;
-}
-
- - - -

結果

- -

{{EmbedLiveSample('Setting_flex_auto','100%','60')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状況備考
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.flex")}}

- -

関連情報

- - diff --git a/files/ja/web/css/flex/index.md b/files/ja/web/css/flex/index.md new file mode 100644 index 0000000000..663452dca7 --- /dev/null +++ b/files/ja/web/css/flex/index.md @@ -0,0 +1,292 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

+ +
{{EmbedInteractiveExample("pages/css/flex.html")}}
+ + + +

構成するプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ + + +

構文

+ +
/* キーワード値 */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* 単位がない数値を1つ指定: flex-grow */
+flex: 2;
+
+/* 幅または高さを1つ指定: flex-basis */
+flex: 10em;
+flex: 30%;
+flex: min-content;
+
+/* 値を2つ指定: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* 値を2つ指定: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* グローバル値 */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

flex プロパティは1つ、2つ、3つの値を取ることがあります。

+ + + +

値

+ +
+
initial
+
アイテムは width および height プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "flex: 0 1 auto" と同等です。
+
auto
+
アイテムは width および height プロパティによって大きさが決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "flex: 1 1 auto" と同等です。
+
none
+
アイテムは width および height プロパティによって大きさが決められます。大きさは完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"flex: 0 0 auto" と同等です。
+
<'flex-grow'>
+
フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 0)
+
<'flex-shrink'>
+
フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 1)
+
<'flex-basis'>
+
フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが 0 ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は 1 です。 (初期値は auto)
+
+ +

解説

+ +

多くの場合、 flex には auto, initial, none, または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。

+ +
+ + + + +

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}

+ +

既定ではフレックスアイテムは最小コンテンツサイズよりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

flex: auto の設定

+ +

HTML

+ +
<div id="flex-container">
+  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+  <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ +

CSS

+ +
#flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#flex-container > .flex-item {
+  flex: auto;
+}
+
+#flex-container > .raw-item {
+  width: 5rem;
+}
+
+ + + +

結果

+ +

{{EmbedLiveSample('Setting_flex_auto','100%','60')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状況備考
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.flex")}}

+ +

関連情報

+ + diff --git a/files/ja/web/css/order/index.html b/files/ja/web/css/order/index.html deleted file mode 100644 index 16092e59ff..0000000000 --- a/files/ja/web/css/order/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: order -slug: Web/CSS/order -tags: - - CSS - - CSS フレックスボックス - - CSS プロパティ - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/order ---- -
{{CSSRef}}
- -

CSS の order プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。

- -
{{EmbedInteractiveExample("pages/css/order.html")}}
- - - -

構文

- -
/* <integer> 値 */
-order: 5;
-order: -5;
-
-/* グローバル値 */
-order: inherit;
-order: initial;
-order: unset;
- -
-

メモ: order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order を speech など、視覚的ではないメディアで使用してはいけません。

-
- -

値

- -
-
{{cssxref("<integer>")}}
-
アイテムが割り当てられる順序グループを表します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

基本的な HTML 一式:

- -
<header>...</header>
-<main>
-  <article>Article</article>
-  <nav>Nav</nav>
-  <aside>Aside</aside>
-</main>
-<footer>...</footer>
- -

以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。

- -
main { display: flex;  text-align:center; }
-main > article { flex:1;        order: 2; }
-main > nav     { width: 200px;  order: 1; }
-main > aside   { width: 200px;  order: 3; }
- -

結果

- -

{{ EmbedLiveSample('Example') }}

- -

アクセシビリティの考慮事項

- -

order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

- - - -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.order")}}

- -

関連情報

- - diff --git a/files/ja/web/css/order/index.md b/files/ja/web/css/order/index.md new file mode 100644 index 0000000000..16092e59ff --- /dev/null +++ b/files/ja/web/css/order/index.md @@ -0,0 +1,111 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

CSS の order プロパティは、フレックスコンテナーやグリッドコンテナーの中で、アイテムを並べる順序を設定します。コンテナー内のアイテムは order の値の昇順に配置され、さらにソースコード内の順序で配置されます。

+ +
{{EmbedInteractiveExample("pages/css/order.html")}}
+ + + +

構文

+ +
/* <integer> 値 */
+order: 5;
+order: -5;
+
+/* グローバル値 */
+order: inherit;
+order: initial;
+order: unset;
+ +
+

メモ: order は要素の視覚上の順序にのみ影響を与えるものであり、論理的な順序やタブオーダーには影響を与えません。order を speech など、視覚的ではないメディアで使用してはいけません。

+
+ +

値

+ +
+
{{cssxref("<integer>")}}
+
アイテムが割り当てられる順序グループを表します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

基本的な HTML 一式:

+ +
<header>...</header>
+<main>
+  <article>Article</article>
+  <nav>Nav</nav>
+  <aside>Aside</aside>
+</main>
+<footer>...</footer>
+ +

以下の CSS コードは伝統的な、コンテンツブロックを囲む 2 つのサイドバーによるレイアウトを生成します。 Flexible Box Layout Module では、垂直方向のサイズが同じで水平方向のスペースを可能な限り多く使用するブロックを、自動的に作成します。

+ +
main { display: flex;  text-align:center; }
+main > article { flex:1;        order: 2; }
+main > nav     { width: 200px;  order: 1; }
+main > aside   { width: 200px;  order: 3; }
+ +

結果

+ +

{{ EmbedLiveSample('Example') }}

+ +

アクセシビリティの考慮事項

+ +

order プロパティを使うと、視覚上の表示と DOM の順序が一致しなくなります。これは、スクリーンリーダーなどの支援技術を使っている視覚障害者に不利な影響を及ぼします。視覚的な (CSS の) 順序が重要である場合は、読み上げソフトの利用者は正しい読み上げ順序でアクセスすることができなくなります。

+ + + +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.order")}}

+ +

関連情報

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