diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/css/css_flexible_box_layout | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/css/css_flexible_box_layout')
11 files changed, 1978 insertions, 0 deletions
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 new file mode 100644 index 0000000000..7e8574e143 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -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 +--- +<p>{{CSSRef}}</p> + +<p class="summary">フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な位置合わせができる初めての機能であってことが挙げられます。正しい縦の位置合わせが可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて位置合わせや行端揃えのプロパティがどのように働くかを詳しくみていきます。</p> + +<p>ボックスを中央寄せするには、 <code>align-items</code> プロパティを使って交差軸 (今回の場合は縦軸) 上の位置合わせをし、 <code>justify-content</code> プロパティで主軸 (今回の場合は横軸) 上の位置合わせをします。</p> + +<p><img alt="中央寄せされたボックスをもつコンテナ要素" src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> + +<p>以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> + +<h2 id="Properties_that_control_alignment" name="Properties_that_control_alignment">配置を制御するプロパティ</h2> + +<p>本ガイドで扱うプロパティは以下のとおりです。</p> + +<ul> + <li>{{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御する。</li> + <li>{{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御する。</li> + <li>{{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御する</li> + <li>{{cssxref("align-content")}} — 仕様では「<ruby>フレックス行のパッキング<rp> (</rp><rt>packing flex lines</rt><rp>) </rp></ruby>」と説明されている。交差軸上でのフレックス行間の余白を制御する。</li> +</ul> + +<p>また、 auto マージンがフレックスボックスでの位置合わせにどのように使えるかについても触れます。</p> + +<div class="note"> +<p><strong>メモ</strong>: フレックスボックスにおける各種の配置プロパティは、そのプロパティ定義専用の仕様である <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a> にも記載されています。この仕様が最終的には Flexbox Level 1 仕様で定義しているプロパティの定義を置き換えることが想定されています。</p> +</div> + +<h2 id="The_Cross_Axis" name="The_Cross_Axis">交差軸</h2> + +<p><code>align-items</code> プロパティと <code>align-self</code> プロパティは、交差軸 (cross axis: <code>flex-direction</code> が <code>row</code> のときは列に沿った、または <code>flex-direction</code> が <code>column</code> のときは行に沿った軸) 上でのフレックスアイテムの配置を制御します。</p> + +<p>もっとも単純なフレックスの例で、交差軸上の位置合わせを試してみましょう。<code>display: flex</code> をコンテナに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように伸張しますので、最も高さのあるアイテムが交差軸上のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナの高さまでアイテムが伸張します。</p> + +<p><img alt="３つのアイテム中１つのアイテムにはほかのアイテムより高くなる要因となる追加のテキストが設定されている。" src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> + +<p><img alt="３つのアイテムとも 200 ピクセルの高さをもつ" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> + +<p>アイテムが同じ高さになるのは、交差軸での配置を制御する <code>align-items</code> プロパティの初期値が <code>stretch</code> となっているためです。</p> + +<p>アイテムの配置をコントロールするために、以下の値を使うことができます。</p> + +<ul> + <li><code>align-items: flex-start</code></li> + <li><code>align-items: flex-end</code></li> + <li><code>align-items: center</code></li> + <li><code>align-items: stretch</code></li> + <li><code>align-items: baseline</code></li> +</ul> + +<p>以下の例では、<code>align-items</code> の値は <code>stretch</code> に設定されています。他の値についても試し、flex コンテナの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}</p> + +<h3 id="Aligning_one_item_with_align-self" name="Aligning_one_item_with_align-self"><code>align-self</code> で個別のアイテムを位置合わせ</h3> + +<p><code>align-items</code> プロパティはすべてのアイテムの <code>align-self</code> プロパティをまとめて設定します。つまり、<code>align-self</code> プロパティでは１つずつ個別のアイテムを対象として指定できます。<code>align-self</code> プロパティには、<code>align-items</code> プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための <code>auto</code> を使うことができます。</p> + +<p>次の例では、フレックスコンテナーには <code>align-items: flex-start</code> を設定していて、これはアイテムを交差軸上の始点に揃えます。<code>first-child</code> セレクタを使って最初のアイテムを対象として、 <code>align-self: stretch</code> を設定しており、また別のアイテムを <code>selected</code> クラスで選択して <code>align-self: center</code> を設定してます。 <code>align-items</code> の値を変更したり、個別のアイテムの <code>align-self</code> の値を変更して、どのように動作するかを試してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}</p> + +<h3 id="Changing_the_main_axis" name="Changing_the_main_axis">主軸の変更</h3> + +<p>ここまでは、 <code>flex-direction</code> が <code>row</code> で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。</p> + +<p><img alt="３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。" src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> + +<p><code>flex-direction</code> を <code>column</code> に変更した場合、<code>align-items</code> と <code>align-self</code> はアイテムの左右方向での位置合わせを行うようになります。</p> + +<p><img alt="３つのアイテムがあり、一つ目は flex-start、二つ目は center、三つ目は flex-end に配置されている。水平方向の軸上で位置合わせされている。" src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> + +<p>次の例では <code>flex-direction: column</code> を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}</p> + +<h2 id="Aligning_content_on_the_cross_axis_—_the_align-content_property" name="Aligning_content_on_the_cross_axis_—_the_align-content_property">交差軸上の位置合わせ — align-content プロパティ</h2> + +<p>ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の位置合わせをしてきました。折り返しのある複数行のフレックスコンテナーがある場合、<code>align-content</code> プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「<a href="https://drafts.csswg.org/css-flexbox/#align-content-property">フレックス行のパッキング (packing flex lines)</a>」として説明されています。</p> + +<p><code>align-content</code> が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高い必要があります。このプロパティはすべてのアイテムを１つのセットとして扱い、あまりのスペースの扱いと、セットに含まれるアイテムの配置について指示します。</p> + +<p><code>align-content</code> プロパティには以下の値を設定できます。</p> + +<ul> + <li><code>align-content: flex-start</code></li> + <li><code>align-content: flex-end</code></li> + <li><code>align-content: center</code></li> + <li><code>align-content: space-between</code></li> + <li><code>align-content: space-around</code></li> + <li><code>align-content: stretch</code></li> + <li><code>align-content: space-evenly</code> (フレックスボックス仕様には含まれていない)</li> +</ul> + +<p>以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 <code>align-content</code> の値は <code>space-between</code> で、この場合は残る分配可能スペース (available space) はフレックス行の<em>間に</em>分配され、フレックス行自体はコンテナの交差軸上の始点と終点に密着して配置されます。</p> + +<p><code>align-content</code> プロパティがどのように働くか、ほかの値を設定して確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}</p> + +<p>列に沿った軸の時にこのプロパティの効果がどのように変わるか、<code>flex-direction</code> を <code>column</code> に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分に余っているスペースが交差軸上に必要です。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}</p> + +<div class="note"> +<p><strong>注</strong>: <code>space-evenly</code> はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの互換性は、フレックスボックス仕様書に定義されている他の値より遅れています。</p> +</div> + +<p>上述の値についての詳細とブラウザー対応状況については <a href="/docs/Web/CSS/justify-content">MDN の <code>justify-content</code> のページ</a>を参照してください。</p> + +<h2 id="Aligning_content_on_the_main_axis" name="Aligning_content_on_the_main_axis">主軸上での位置合わせ</h2> + +<p>ここまで交差軸上での位置合わせがどのように動くかを見てきましたが、ここでは主軸上での位置合わせについて見ていきます。使えるプロパティは <code>justify-content</code> の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 <code>justify-content</code> では、アイテムを表示するのに必要な分よりも大きいスペースがある場合の分配可能スペースの扱いを制御できます。</p> + +<p>コンテナに <code>display: flex</code> を設定した最初の例では、アイテムはコンテナの始点に一行に整列して表示されます。これは <code>justify-content</code> の初期値が <code>flex-start</code> であるためです。すべての分配可能スペースはアイテムの後ろに置かれます。</p> + +<p><img alt="３つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナ内にある。分配可能スペースはアイテムの後ろに置かれる。" src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p><code>justify-content</code> プロパティは <code>align-content</code> と同じ値を受け付けます。</p> + +<ul> + <li><code>justify-content: flex-start</code></li> + <li><code>justify-content: flex-end</code></li> + <li><code>justify-content: center</code></li> + <li><code>justify-content: space-between</code></li> + <li><code>justify-content: space-around</code></li> + <li><code>justify-content: stretch</code></li> + <li><code>justify-content: space-evenly</code> (フレックスボックス仕様書には含まれていない)</li> +</ul> + +<p>次の例では、 <code>justify-content</code> の値は <code>space-between</code> となっています。アイテムを表示した後に余った分配可能スペースは、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と終点に揃えて並びます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}</p> + +<p><code>flex-direction</code> が <code>column</code> に設定されて主軸がブロック方向となっているとき、<code>justify-content</code> はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}</p> + +<h3 id="Alignment_and_Writing_Modes" name="Alignment_and_Writing_Modes">配置と書字方向</h3> + +<p>上述の配置方法において、<code>flex-start</code> と <code>flex-end</code> はいずれも writing mode に対応したものとなります。<code>justify-content</code> の値が <code>flex-start</code> で、書字方向が英語のように左から右であれば、アイテムはコンテナーの左端から並べられます。</p> + +<p><img alt="３つのアイテムは左側に並んでいる" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>一方で writing mode がアラビア語のように右から左であれば、アイテムはコンテナの右端から並べられます。</p> + +<p><img alt="３つのアイテムは右側から並んでいる" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>以下の例ではフレックスアイテムを右から左に並べるために <code>direction</code> プロパティを <code>rtl</code> を設定しています。この設定を削除したり <code>justify-content</code> の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}</p> + +<h2 id="Alignment_and_flex-direction" name="Alignment_and_flex-direction">配置と flex-direction</h2> + +<p><code>flex-direction</code> プロパティを変更した場合にも、始点は変わります。例えば<code>row</code> の代わりに <code>row-reverse</code> を設定した場合などがこれにあたります。</p> + +<p>次の例では、<code>flex-direction: row-reverse</code> と <code>justify-content: flex-end</code> を設定してアイテムをレイアウトしています。左から右の言語では、すべてのアイテムは左側に並びます。<code>flex-direction: row-reverse</code> の値を <code>flex-direction: row</code> に変更してみてください。アイテムが右側に移動することがわかります。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}</p> + +<p>こうした動作はすこし紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸・行方向の軸に沿ってフレックスアイテムが配置されます。<code>flex-start</code> は文の中でテキストが始まる側を示すことになります。</p> + +<p><img alt="左から始まり右で終わることを示す図" src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><code>flex-direction: column</code> を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は <code>flex-start</code> は段落が始まる先頭を示すことになります。</p> + +<p><img alt="上から始まり下で終わることを示す図" src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>flex-direction を逆方向に設定した場合、軸の終点側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。<code>flex-start</code> はその軸の終点側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。</p> + +<p><img alt="右から始まり左で終わることを示す図" src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="下から始まり上で終わることを示す図" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<h2 id="主軸上での位置合わせに_auto_マージンを使う">主軸上での位置合わせに auto マージンを使う</h2> + +<p>主軸上ではアイテムは一つのグループとして扱われるため、<code>justify-items</code> プロパティや <code>justify-self</code> プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の位置合わせをすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。</p> + +<p>よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは <code>justify-self</code> プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。３つのアイテムが片方にあり、もう一方に２つのアイテムがあります。もし仮に <code>justify-self</code> がアイテム <em>d</em> に対して使えたとすると、意図したものであってもそうでなくても、それに続くアイテム <em>e</em> の配置も変わってしまうでしょう (訳註: プロパティ名で self = 自分自身と言っているのに他のアイテムにも影響を与えてしまう)。</p> + +<p><img alt="２つのグループに分かれた５つのアイテム。３つは左側にあり、２つは右側にある。" src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> + +<p>4 つめのアイテムに対して <code>justify-content</code> ではなく <code>margin-left</code> に <code>auto</code> を設定すれば、先頭の３つから分離できます。auto マージンはマージンの方向に沿ったスペースをすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央そろえするときと同じです。両側のマージンが取れるだけのスペースをとろうとするために、ブロックが中央に押し出されることになります。</p> + +<p>以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、<code>margin-left: auto</code> を設定した <code>push</code> クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}</p> + +<h2 id="Future_alignment_features_for_Flexbox" name="Future_alignment_features_for_Flexbox">フレックスボックスの配置機能の将来</h2> + +<p>この記事のはじめに、配置プロパティは flexbox Level 1 仕様と、将来的にプロパティや設定値を拡張する可能性のある Box Alignment Level 3 仕様のいずれにも含まれていることを述べました。その一例として、 <code>align-content</code> と <code>justify-content</code> プロパティに <code>space-evenly</code> が導入されていることも紹介しました。</p> + +<p>ボックス配置モジュールは、他にも <code>column-gap</code> や <code>row-gap</code> といった、アイテムの間にスペースを作るための方法を含んでいます (<a href="/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> にて説明しています)。これらのプロパティがボックス配置に含まれているということは、将来的に <code>column-gap</code> や <code>row-gap</code> がフレックスレイアウトでも使用できるようになることを示しており、 Firefox 63 はフレックスレイアウトに gap のプロパティを初めて実装したブラウザーになるでしょう。</p> + +<p>フレックスボックスでの配置について深く学ぼうとする際には、グリッドレイアウトと並べて見ることをおすすめします。いずれの仕様もボックス配置仕様書で詳細化されている配置プロパティを使っています。これらのプロパティがグリッドの場合にどのようにはたらくかについては、 MDN の記事 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトでのボックス配置</a>を参照してください。また、筆者 (訳注: 英語版の作成者 <a href="https://developer.mozilla.org/profiles/rachelandrew">rachelandrew</a>) は各仕様における位置合わせの動作について <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a> で比較しています。</p> + +<h2 id="See_Also" name="See_Also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment">ボックス配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">フレックスボックスでのボックス配置</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">グリッドレイアウトでのボックス配置</a></li> +</ul> 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 new file mode 100644 index 0000000000..a93b005b5c --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -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 +--- +<div>{{CSSRef}}</div> + +<p class="summary">フレックスボックスは最新のブラウザーではとてもよく対応されていますが、いくつかの問題に遭遇する可能性があります。このガイドでは、フレックスボックスがブラウザーでどの程度対応されているかを見て、いくつかの潜在的な問題、リソース、回避策やフォールバックを作成するための方法を見ていきます。</p> + +<h2 id="The_history_of_flexbox" name="The_history_of_flexbox">フレックスボックスの歴史</h2> + +<p>すべての CSS の仕様と同じく、フレックスボックスの仕様も、現在の勧告候補になるまでに多くの変更がありました。一般的に勧告候補となった仕様には以後大幅な変更は行われませんが、フレックスボックスに関しては過去の例を見る限り例外で、何度も修正が入っています。</p> + +<p>過去、フレックスボックスはいくつかのブラウザーで実験的に実装されました。その際にはベンダー接頭辞が使われました。このような接頭辞は、他の実装と衝突することなく、仕様の実装をブラウザーエンジニアやウェブ開発者がテストして調査するためのものであり、本番で使うためのものではありませんでした。しかし、結局は本番で使用され、実験的な仕様が変更されるたびに本番のサイトを修正しなければなりませんでした。</p> + +<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">2009 年の仕様</a>は、今とはだいぶ異なります。フレックスコンテナーの生成するには <code>display: box</code> を使い、数々の <code>box-*</code> プロパティがあり、今日のフレックスボックスと同じような機能を持っていました。</p> + +<p><a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">仕様変更</a>によって構文が <code>display: flexbox</code> へと変わりました。これもベンダー接頭辞つきでした。</p> + +<p>最終的には、フレックスコンテナーの作成には <code>display: flex</code> を指定するという仕様に変わりました。仕様が固まってからは、最新の仕様に対するブラウザーの対応は良好です。</p> + +<p>古い仕様にもとづいて書かれた古い記事もまだ存在しますが、フレックスコンテナーの指定方法の違いで簡単に見分けられます。 <code>display: box</code> や <code>display: flexbox</code> ならば、それは古い情報です。</p> + +<h2 id="Status_in_browsers" name="Status_in_browsers">ブラウザーの状況</h2> + +<p>フレックスボックスへのブラウザーの対応は良好です。現時点での大多数のブラウザーでは、ベンダー接頭辞は不要です。 Safari が 2015 年に Safari 9 で対応したことで、有名なブラウザーはすべて接頭辞不要となりました。ただし、下記の 2 つのブラウザーでは、ブラウザー間の互換性にまだ注意が必要です。</p> + +<ul> + <li>Internet Explorer 10。<code>display: flexbox</code> の仕様で実装されていて、<code>-ms-</code> の接頭辞が必要です。</li> + <li>UC Browser。2009 年の <code>display: box</code> の仕様のままで、<code>-webkit-</code> の接頭辞が必要です。</li> +</ul> + +<p>また、Internet Explorer 11 は最新の <code>display: flex</code> の仕様に対応していますが、その実装に多くのバグがあることにも注意してください。</p> + +<h2 id="Common_issues" name="Common_issues">よくある問題</h2> + +<p>フレックスボックスの問題の大部分は、開発中だった頃の仕様の変更や、実験段階の仕様を本番で使おうとすることに関連しています。IE10 や IE11 のような古いブラウザーへの後方互換性を確保したいなら、<a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> のサイトが役に立ちます。そこで挙げられているバグの多くが古いバージョンのブラウザーのものであり、現行のバージョンでは解決していることが分かると思います。バグにはそれぞれ回避策が示されているので、長い試行錯誤から救ってくれることでしょう。</p> + +<p>非常に古いブラウザーにも対応したいのなら、CSS での通常の指定に加えて、ベンダー接頭辞つきの指定を使ってください。フレックスボックスへの対応が広がっている現在、接頭辞が必要な場面はどんどん少なくなっていますが。</p> + +<pre class="brush: css notranslate">.wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +}</pre> + +<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> は、どの世代のブラウザーまで対応したいかに応じて必要な接頭辞を示してくれるので便利です。また、<a href="https://caniuse.com/#feat=flexbox">Can I Use</a> では、ブラウザーで接頭辞が削除された時期を調べることができます。</p> + +<h2 id="Useful_fallback_techniques" name="Useful_fallback_techniques">有用なフォールバック方法</h2> + +<p>フレックスボックスの適用が {{cssxref("display")}} プロパティの値で決まるのであれば、フレックスボックスに全く対応していない古いブラウザーに対応する際には、あるレイアウト方法を別のもので上書きすることでフォールバックとすることができます。仕様は、フレックスアイテムとなるはずの要素に対して別のレイアウト方法を適用した場合に何が起こるかということも定義しています。</p> + +<h3 id="Floated_items" name="Floated_items">浮動アイテム</h3> + +<blockquote> +<p>「float と clear はフレックスアイテムの浮動やその解除を行いません。また、フロー外へ出すこともしません」 - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Flex Containers</a></p> +</blockquote> + +<p>下記のライブサンプルでは、2 つのブロック要素を浮動させ、コンテナに <code>display: flex</code> を指定しています。これでアイテムはフレックスアイテムとなります。つまり両者は同じ高さに引き伸ばされます。float の効果は一切現れません。</p> + +<p>フォールバックの挙動を試すには、ラッパーから <code>display: flex</code> を削除してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> + +<h3 id="display_inline-block" name="display_inline-block">display: inline-block</h3> + +<p><code>inline-block</code> のアイテムがフレックスアイテムになるとブロック要素になり、アイテム同士の間に空白が保持されるような <code>display: inline-block</code> の効果が現れなくなります。</p> + +<p><code>display: flex</code> を削除してフォールバックの挙動を確認してください。アイテム間に空白が追加されるはずです。これはインライン要素や <code>display: inine-block</code> を指定した要素の挙動と同じです。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> + +<h3 id="display_table-" name="display_table-">display: table-</h3> + +<p>CSS のテーブル表示のプロパティは、フォールバックとしてはおそらく最も有用でしょう。なぜなら、高さを揃えるために引き伸ばすことや、縦方向の中央揃えなどのデザインパターンが可能であり、しかもそれが Internet Explorer 8 のような古いブラウザーでも動作するからです。</p> + +<p>アイテムに <code>display: table-cell</code> を指定すれば、HTML のテーブルセルの性質を帯びることになります。CSS は 2 種類の無名のボックスを作ります。ひとつは <tr> の、もうひとつは <table> の役割を果たします。このおかげで、アイテムを実際の HTML 要素で包む必要はありません。これら無名ボックスは不可視でスタイルを指定することもできません。単にツリー構造を補うためのものなのです。</p> + +<p>親要素に <code>display: flex</code> を指定すると、これら無名ボックスは生成されません。アイテムはフレックスコンテナの直下の子要素のままなので、フレックスアイテムになることができます。なお、テーブル関連の機能は失われます。</p> + +<blockquote> +<p>「注: display の値のいくつかは、元の要素の周りに無名ボックスを生成します。元の要素がフレックスアイテムの場合、まずはじめにブロック要素となるので、無名ボックスは生成されません。例えば、2 つの隣り合うフレックスアイテムに display: table-cell を指定すると、display: block を指定された 2 つの別々の フレックスアイテムとなります。1 つの無名のテーブル要素にまとめて包まれることはありません」 - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Flex Items</a></p> +</blockquote> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> + +<h3 id="The_vertical-align_property" name="The_vertical-align_property">vertical-align プロパティ</h3> + +<p>下記のライブサンプルでは、<code>display: inline-block</code> の要素に対して {{cssxref("vertical-align")}} を指定しています。このプロパティは、<code>display: table-cell</code> と <code>display: inline-block</code> のどちらにも指定できます。<code>vertical-align</code> による縦方向の整列は、フレックスボックスよりも先に行われます。このプロパティはフレックスボックスには無視されるので、フォールバックとして <code>display: table-cell</code> や <code>display: inline-block</code> とともに使用できます。それによってフレックスボックスの整列系のプロパティが悪影響を受けることはありません。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> + +<h2 id="Feature_Queries_and_flexbox" name="Feature_Queries_and_flexbox">機能クエリとフレックスボックス</h2> + +<p>下記のように、フレックスボックスに対応しているかどうかを<a href="/ja/docs/Web/CSS/%40supports">機能クエリ</a>で検査できます。</p> + +<pre class="brush: css notranslate">@supports (display: flex) { + // 対応しているブラウザー向けのコード +}</pre> + +<p>Internet Explorer 11 は機能クエリに対応していませんが、フレックスボックスには対応していることに注意してください。IE11 のフレックスボックスの実装にはバグが多いため、フォールバックを採用することもあるでしょう。その場合は機能クエリを使って、対応しているブラウザーだけにフレックスボックスを適用することができます。ベンダー接頭辞が必要がブラウザーをサポート対象に含めたいなら、機能クエリにもベンダー接頭辞付きの条件を追加する必要があることを忘れないでください。下記の機能クエリは UC Browser を含みます。UC Browser は機能クエリと接頭辞付きの古い構文に対応しています。</p> + +<pre class="brush: css notranslate">@supports (display: flex) or (display: -webkit-box) { + // 対応しているブラウザー向けのコード +}</pre> + +<p>機能クエリについて詳しく知りたい場合は、Mozilla Hacks ブログの <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a> をご覧ください。</p> + +<h2 id="Conclusion" name="Conclusion">終わりに</h2> + +<p>このガイドで潜在的な問題やフォールバックについて学んだことで、フレックスボックスを本番で使う準備が整いました。このガイドは、問題に遭遇した場合、または古いブラウザーに対応する必要がある場合に役立ちます。</p> 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 new file mode 100644 index 0000000000..d73d12b7d4 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -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 +--- +<div>{{CSSRef}}</div> + +<p class="summary">通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間でスペースの分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。この記事ではフレックスボックスの主な特徴の概要を示します。詳細については、このガイドのほかのページで説明します。</p> + +<p>フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が行と列の二次元を同時に制御するモデルであることと対照的です。</p> + +<h2 id="The_two_axes_of_flexbox" name="The_two_axes_of_flexbox">フレックスボックス 2 つの軸</h2> + +<p>フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は {{cssxref("flex-direction")}} プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。フレックスボックスを使った操作ではつねにこの軸について参照することになるので、最初にその動きを理解しましょう。</p> + +<h3 id="The_main_axis" name="The_main_axis">主軸</h3> + +<p>主軸は <code>flex-direction</code> によって定義され、4 種類の値をとることができます。</p> + +<ul> + <li><code>row</code></li> + <li><code>row-reverse</code></li> + <li><code>column</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p><code>row</code> または <code>row-reverse</code> を選択した場合、主軸は<strong>インライン要素の並ぶ方向</strong>に伸びる軸となります。</p> + +<p><img alt="flex-direction が row に設定された場合の主軸は、インライン方向の行に沿った軸となる。" src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p><code>column</code> または <code>column-reverse</code> を選んだ場合は、ページの上から下に向かって<strong>ブロック要素の並ぶ方向</strong>に伸びる軸となります。</p> + +<p><img alt="flex-direction が column に設定された場合の主軸は、ブロック方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 id="The_cross_axis" name="The_cross_axis">交差軸</h3> + +<p>交差軸は主軸に垂直に交わる軸です。したがって、<code>flex-direction</code> (主軸) が <code>row</code> または <code>row-reverse</code> なら、交差軸は列に沿ったものになります。</p> + +<p><img alt="flex-direction が row に設定されている場合の交差軸は、ブロック方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p>主軸が <code>column</code> または <code>column-reverse</code> であれば、交差軸は行の方向になります。</p> + +<p><img alt="flex-direction が column に設定されている場合の交差軸は、インライン方向に沿った軸となる。" src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p>フレックスアイテムの整列と位置合わせを検討する際には、どの軸が重要なのかを理解することが重要です。フレックスボックスには、コンテンツを一方の軸または他方の軸に沿って揃えたり、位置合わせしたりするプロパティが用意されています。</p> + +<h2 id="Start_and_end_lines" name="Start_and_end_lines">行の先頭と末尾</h2> + +<p>理解が必要なもう一つの重要事項は、フレックスボックスは文書の書字方向を仮定しないという点です。 CSS は過去には、左から右への横書きの書字方向に過度に偏っていました。最近のレイアウト方法は多様な書字方向に対応しており、したがってテキスト行が左上から始まり右に進み、新しい行が下に続くということを仮定しません。</p> + +<p>フレックスボックスと書字方向の仕様の関係については、後に別の記事でくわしく触れますが、ここではフレックスアイテムを流し込む方向について、上下左右という言葉を使わない理由について説明します。</p> + +<p>もし <code>flex-direction</code> が <code>row</code> で言語が英語の場合、主軸の先頭は左で末尾は右になります。</p> + +<p><img alt="英語の場合、先頭は左" src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>一方で言語がもしアラビア語であった場合、主軸の先頭は右で末尾が左になります。</p> + +<p><img alt="右から左に書く言語では、先頭は右" src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>いずれの場合でも、両言語ともに書字方向が横書きであるため、交差軸の先頭側は上で末尾側が下になります。</p> + +<p>こうしてみると、左と右ではなく先頭と末尾で考えることが自然なものに思えます。この考え方は CSS グリッドレイアウトのような、同じパターンに従っているレイアウトメソッドを扱う際にも役立つでしょう。</p> + +<h2 id="The_flex_container" name="The_flex_container">フレックスコンテナー</h2> + +<p>フレックスボックスを使ってレイアウトされる文書の領域は、<strong>フレックスコンテナー</strong>と呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して {{cssxref("display")}} プロパティの値を <code>flex</code> もしくは <code>inline-flex</code> に設定します。またこれにより、このコンテナー直下の子要素が <strong>フレックスアイテム</strong>となります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。</p> + +<ul> + <li>フレックスアイテムは行に沿って並んで表示されます (<code>flex-direction</code> プロパティの既定値は <code>row</code>)。</li> + <li>フレックスアイテムは主軸の先頭側を先頭に並びます。</li> + <li>フレックスアイテムは、主軸方向に伸張されませんが、収縮する場合があります。</li> + <li>フレックスアイテムは、交差軸の大きさを埋めるように伸張されます。</li> + <li>{{cssxref("flex-basis")}} プロパティは <code>auto</code> に設定されます。</li> + <li>{{cssxref("flex-wrap")}} プロパティは <code>nowrap</code> に設定されます。</li> +</ul> + +<p>その結果、アイテムはすべて一行に並び、コンテンツの寸法が主軸方向の寸法になります。アイテムがコンテナーに収まらない場合は、折り返されずにあふれます。一部のアイテムの高さが他のアイテムより大きい場合には、すべてのアイテムが交差軸方向にその全高を埋めるように伸張されます。</p> + +<p>この見え方についての、例を以下に挙げます。アイテムを変更したり新たに追加してフレックスボックスの初期値の挙動を確認してください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}}</p> + +<h3 id="Changing_flex-direction" name="Changing_flex-direction">flex-direction の変更</h3> + +<p>フレックスコンテナーに {{cssxref("flex-direction")}} プロパティを設定すると、フレックスアイテムが表示される方向を変更することができます。 <code>flex-direction: row-reverse</code> と設定することで、アイテムは行に沿って並ぶ点は変わりませんが、先頭と末尾が入れ替わります。</p> + +<p><code>flex-direction</code> を <code>column</code> に変更すると、主軸の方向が変わり、フレックスアイテムは列に沿って並んで表示されるようになります。 <code>column-reverse</code> では、さらに先頭と末尾が入れ替わります。</p> + +<p>次の例では、<code>flex-direction</code> が <code>row-reverse</code> に設定されています。他の値である <code>row</code>, <code>column</code>, <code>cokumn-reverse</code> で何が起こるか確かめてみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 id="Multi-line_flex_containers_with_flex-wrap" name="Multi-line_flex_containers_with_flex-wrap">flex-wrap による複数行のフレックスコンテナー</h2> + +<p>フレックスボックスは一次元モデルですが、フレックスアイテムを複数行に折り返して表示させることも可能です。その際には、それぞれの行を新しいフレックスコンテナーとして捉える必要があります。スペースの分配はその行の中でのみ発生し、隣の行については参照されません。</p> + +<p>折り返しを発生させるには {{cssxref("flex-wrap")}} プロパティに値として <code>wrap</code> を設定します。するとアイテムが一行で表示するには大きすぎる場合には、新たな行に折り返しされます。以下の例では、全アイテムを合わせた幅がフレックスコンテナーよりも大きくなるような幅をアイテムに設定しています。 <code>flex-wrap</code> を <code>wrap</code> に設定すると、アイテムが折り返します。初期値である <code>nowrap</code> に設定すると、フレックスボックスの初期値はアイテムの収縮を許可するので、アイテムはコンテナーに合うように収縮されます。 <code>nowrap</code> はアイテムを収縮不可能な場合や、コンテナーに合う大きさまで小さくできない場合には、あふれ出ます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<p>フレックスアイテムの折り返しについての詳細は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a>を参照してください。</p> + +<h2 id="The_flex-flow_shorthand" name="The_flex-flow_shorthand">flex-flow 一括指定プロパティ</h2> + +<p><code>flex-direction</code> と <code>flex-wrap</code> の 2 つのプロパティは、{{cssxref("flex-flow")}} 一括指定プロパティにより 2 つ同時に指定することができます。最初に指定される値が <code>flex-direction</code> で、2 つ目の値が <code>flex-wrap</code> です。</p> + +<p>以下の例で、1 つ目の値を <code>flex-direction</code> に使える値 (<code>row</code>, <code>row-reverse</code>, <code>column</code>, <code>column-reverse</code> のいずれか) に変更してみてください。また、2 つ目の値を <code>wrap</code> か <code>nowrap</code> に変更してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 id="Properties_applied_to_flex_items" name="Properties_applied_to_flex_items">フレックスアイテムに適用されるプロパティ</h2> + +<p>フレックスアイテムに対してさらなる制御をするために、アイテムを直接操作対象にすることができます。以下の 3 つのプロパティを使用します。</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p>本ページでは、これらのプロパティについて簡単に触れます。<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸におけるフレックスアイテムの比率の制御</a>のガイドで、より完全な情報を得られます。</p> + +<p>上述のプロパティについて理解する前に、<strong>分配可能スペース</strong> (available space) の概念について考える必要があります。上述のプロパティを変更するということは、アイテム間での分配可能スペースの分配のしかたを変えるということです。この分配可能スペースについての考え方は、アイテムの位置合わせについて考える時に重要になります。</p> + +<p>たとえば、500 ピクセル幅のコンテナーの中に 100 ピクセル幅のアイテムが 3 つあるとき、アイテムの配置に必要な幅は 300 ピクセルです。このとき 200 ピクセルの分配可能スペースが残っています。初期値を変更しなかった場合フレックスボックスは、スペースを最後のアイテムの後ろに配置します。</p> + +<p><img alt="このフレックスコンテナーは、アイテムを配置した後に分配可能スペースがある。" src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>そうではなく、アイテムを拡大してスペースを埋めたいときには、余っているスペースをアイテムに分配する方法が必要となります。それがアイテム自体に設定する <code>flex</code> プロパティが提供する機能です。</p> + +<h3 id="The_flex-basis_property" name="The_flex-basis_property">flex-basis プロパティ</h3> + +<p><code>flex-basis</code> は、そのアイテムの寸法を、使用しないスペースは分配可能スペースとして残すように定義します。このプロパティの初期値は auto で、この設定ではブラウザーはアイテムにサイズが設定されているかを確認します。上述の例では、すべてのアイテムが100ピクセルの幅に設定されているため、これが <code>flex-basis</code> として使われます。</p> + +<p>アイテムにサイズが設定されていない場合は、その内容のサイズが <code>flex-basis</code> として使われます。<code>display: flex</code> を親要素に設定するだけで、すべてのフレックスアイテムがそのアイテムの内容を表示するのに必要なスペースのみを使用して行の中に整列していたのは、この挙動のためです。</p> + +<h3 id="The_flex-grow_property" name="The_flex-grow_property">flex-grow プロパティ</h3> + +<p><code>flex-grow</code> プロパティを正の整数に設定すると、フレックスアイテムは主軸に沿って <code>flex-basis</code> 以上に伸張することができます。これによって、アイテムが主軸に沿った分配可能スペースをすべて使うまで伸張するか、ほかのアイテムにも <code>flex-grow</code> が設定されていたときには一定の割合を使うように伸張するようになります。</p> + +<p>先ほどの例で、すべてのアイテムの <code>flex-grow</code> に 1 を設定すると、分配可能スペースはアイテム間で均等に分配され、主軸に沿ってコンテナーを埋めるように伸張されます。</p> + +<p><code>flex-grow</code> プロパティは割合で余白を配分するために使うことができます。最初のアイテムの <code>flex-grow</code> に 2 を設定し、ほかのアイテムには 1 を設定した場合、最初のアイテムに2/4 (先ほどの例では 200px 中の 100px ) が与えられ、残りの 2 つのアイテムに 1/4 (200px 中の 50px ) ずつが与えられます。</p> + +<h3 id="The_flex-shrink_property" name="The_flex-shrink_property">flex-shrink プロパティ</h3> + +<p><code>flex-grow</code> プロパティが主軸上のスペースの追加を扱う一方で、<code>flex-shrink</code> はスペースの取りあげ方をコントロールします。 アイテムを配置するのに十分なスペースがコンテナーになく、<code>flex-shrink</code> に正の整数が設定されていれば、アイテムは <code>flex-basis</code> よりも小さくなります。<code>flex-grow</code> と同様に、あるアイテムの収縮するスピードを他のアイテムより早くするために、異なる値を設定することができます。 つまりより大きな値が flex-shrink に設定されているアイテムは、他のより小さな値が設定されている兄弟要素よりも速く収縮します。</p> + +<p>実際の収縮幅の計算にはアイテムの最小サイズが考慮されるため、<code>flex-shrink</code> の動作は <code>flex-grow</code> に比べて一貫性がないように見えるかもしれません。そのため、そのアルゴリズムがどのように動くかについての詳細は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の制御</a> の記事に書かれています。</p> + +<div class="note"> +<p>注意: <code>flex-grow</code> や <code>flex-shrink</code> に指定する値は割合です。一般的には、たとえばあるアイテムを他の <code>flex: 1 1 200px</code> に設定したアイテムより２倍速く拡大させたいときには、<code>flex: 2 1 200px</code> を設定します。しかし、望むならば <code>flex: 10 1 200px</code> と <code>flex: 20 1 200px</code> という書き方もできます。</p> +</div> + +<h3 id="Shorthand_values_for_the_flex_properties" name="Shorthand_values_for_the_flex_properties">flex プロパティの一括指定</h3> + +<p><code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code> の各プロパティを個別に使うケースはとても珍しく、そのかわりに {{cssxref("flex")}} 一括指定プロパティでまとめて指定されることが多いでしょう。<code>flex</code> 一括指定プロパティは、<code>flex-grow</code>、<code>flex-shrink</code>、<code>flex-basis</code> の順に３つの値を設定できます。</p> + +<p>以下の例では、<code>flex</code> 一括指定プロパティの様々な値を試せるようになっています。 最初の値が <code>flex-grow</code> であり、正の値を指定することでアイテムが伸張できるようになります。２番目の値は <code>flex-shrink</code> です。正の値によりアイテムが収縮できるようになりますが、アイテムの合計サイズが主軸からはみ出す場合のみ起こります。最後の値が <code>flex-basis</code> となり、アイテムが伸張・収縮する際の基準値となります。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p> + +<p>また、ほとんどのユースケースをカバーできるいくつかの定義済みの一括指定値があります。 チュートリアル中で使用されているのを度々見かけるでしょうし、ほとんどの場合でこれらの値で十分でしょう。 定義済みの値は以下のとおりです。</p> + +<ul> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <正の数></code></li> +</ul> + +<p><code>flex: initial</code> はフレックスボックスの初期値にリセットします。これは <code>flex: 0 1 auto</code> に設定することと同じです。この場合 <code>flex-grow</code> は 0 となるため、アイテムが <code>flex-basis</code> よりも大きくなることはありません。<code>flex-shrink</code> は 1 なので、必要な場合にはオーバーフローするのではなく収縮します。<code>flex-basis</code> の値は <code>auto</code> です。アイテムに設定されている主軸に沿ったサイズか、またはアイテムの内容のサイズがフレックスアイテムのサイズとして使用されます。</p> + +<p><code>flex: auto</code> では、<code>flex: 1 1 auto</code> に設定することと等しくなります。<code>flex: initial</code> とは、アイテムがコンテナーを埋めるように伸張する点を除いて同じで、必要に応じて収縮もします。</p> + +<p><code>flex: none</code> は、全く伸縮性の無い flex アイテムを作成します。これは <code>flex: 0 0 auto </code>と同じです。アイテムは伸張も収縮もせずに、<code>flex-basis: auto</code> のフレックスボックスとして配置されます。</p> + +<p>チュートリアル内では、<code>flex: 1</code> や <code>flex: 2</code> のような設定をよく目にするでしょう。これは <code>flex: 1 1 0</code> を使うのと同様、<code>flex-basis</code> が 0 の状態から伸び縮みします。</p> + +<p>これらの短縮値について、以下の例でためしてみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p> + +<h2 id="Alignment_justification_and_distribution_of_free_space_between_items" name="Alignment_justification_and_distribution_of_free_space_between_items">アイテム間での位置合わせ、端揃え、スペース分配</h2> + +<p>フレックスボックスの重要な特徴は、主軸および交差軸において位置合わせや端揃えをし、フレックスアイテム間でのスペースの分配ができる点にあります。</p> + +<h3 id="align-items">align-items</h3> + +<p>{{cssxref("align-items")}} プロパティは、交差軸におけるアイテムの位置合わせを行います。</p> + +<p>このプロパティの初期値は <code>stretch</code> であり、これによって既定では最も高いフレックスアイテムの高さまで他のアイテムが伸張する挙動になっています。実際には、最も高いフレックスアイテムの高さがコンテナーの高さを決めるため、フレックスコンテナーを埋めるように伸張します。</p> + +<p>アイテムをフレックスコンテナーの先頭側に揃えるためには <code>align-items</code> に <code>flex-start</code> を設定し、末尾側に揃えるためには <code>flex-end</code> を、中央揃えにするには <code>center</code> を設定します。 以下の例で試してみましょう。この例では、コンテナー内でアイテムがどのように移動するかわかりやすくするためフレックスコンテナーに高さを設定しています。<code>align-items</code> に以下の値を設定したときにそれぞれ何が起こるか確認してください。</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 id="justify-content">justify-content</h3> + +<p>{{cssxref("justify-content")}} プロパティは、主軸におけるアイテムの配置、つまり <code>flex-direction</code> で設定された方向における位置合わせを行います。初期値は <code>flex-start</code> で、コンテナーの先頭側からアイテムが並べられます。<code>flex-end</code> を設定することで末尾から、<code>center</code> を設定することで中央に並べることもできます。</p> + +<p>また、<code>space-between</code> を使用して、アイテムを配置したあとの残りのスペースのすべてをアイテム間で均等に振り分けられ、これによって同じ幅の空白がそれぞれアイテムの間に挿入されます。各アイテムの左右に同じだけのスペースを空けるには、<code>space-around</code> を使用します。<code>space-around</code> では、コンテナーの両端には、アイテム間の半分のサイズのスペースが設けられます。両端にも同じだけのスペースを設けるには、<code>space-evenly</code> を使用します。この場合はコンテナの両端にフルサイズ (アイテム間と同じサイズ) のスペースが設けられます。</p> + +<p>例で、以下の <code>justify-content</code> の値を試してみましょう。</p> + +<ul> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> + <li><code>space-evenly</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナー内でのアイテムの配置</a>の記事では、これらのプロパティがどのように動作するのか深く理解するために、より詳細に述べています。しかし上述の簡潔な例でもほとんどのユースケースで役に立つでしょう。</p> + +<h2 id="Next_steps" name="Next_steps">次のステップ</h2> + +<p>この記事で、フレックスボックスの基本的な特徴についての理解ができたと思います。次の記事では<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">この仕様が他の CSS レイアウトメソッドとどのような関係にあるか</a>を見ていきます。</p> 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 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.html @@ -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 +--- +<div>{{CSSRef}}</div> + +<p class="summary">このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる三つのプロパティを見ていきます。 — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} です。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。</p> + +<h2 id="A_first_look" name="A_first_look">最初に見てみる</h2> + +<p>三つのプロパティは、フレックスアイテムの自由度を以下の観点から制御します。</p> + +<ul> + <li><code>flex-grow</code>: このアイテムがどれだけ余白を得るか。</li> + <li><code>flex-shrink</code>: このアイテムからどれだけ余白を削除できるか。</li> + <li><code>flex-basis</code>: 伸長や縮小が発生する前のアイテムの寸法はいくつか。</li> +</ul> + +<p>プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは <code>flex-grow</code> プロパティを <code>2</code> に、 <code>flex-shrink</code> を <code>1</code> に、 <code>flex-basis</code> を <code>auto</code> に設定します。</p> + +<pre class="brush: css no-line-numbers">.item { + flex: 2 1 auto; +}</pre> + +<p>すでに<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a>の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。</p> + +<h2 id="Important_concepts_when_working_on_the_main_axis" name="Important_concepts_when_working_on_the_main_axis">主軸に合わせて動作する重要概念</h2> + +<p>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 <em>natural</em> size of flex items before any growing or shrinking takes place, and to the concept of free space.</p> + +<h3 id="Flex_item_sizing" name="Flex_item_sizing">フレックスアイテムの寸法の変更</h3> + +<p>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?</p> + +<p>There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">defined in the CSS Intrinsic and Extrinsic Sizing Specification</a>, and can be used in place of a <a href="/ja/docs/Web/CSS/length">length unit</a>.</p> + +<p>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 <code>min-content</code>. 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 <code>min-content</code> size of that string. Essentially, the longest word in the string is dictating the size.</p> + +<p>The second paragraph has a value of <code>max-content</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p> + +<p>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.</p> + +<p><img alt="The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p> + +<p>Remember this behaviour and what effects <code>min-content</code> and <code>max-content</code> have as we explore <code>flex-grow</code> and <code>flex-shrink</code> later in this article.</p> + +<h3 id="Positive_and_negative_free_space" name="Positive_and_negative_free_space">正と負のフリースペース</h3> + +<p>To talk about these properties we need to understand the concept of <strong>positive and negative free space</strong>. 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 <code>row</code>, 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.</p> + +<p><img alt="Image showing space left over after items have been displayed." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>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.</p> + +<p><img alt="The items overflow the container" src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p> + +<p>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.</p> + +<p>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 <code>flex-direction: column</code>. 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.</p> + +<h2 id="The_flex-basis_property" name="The_flex-basis_property">flex-basis プロパティ</h2> + +<p>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 <code>auto</code>. If <code>flex-basis</code> is set to <code>auto</code> 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 <code>200px</code> would be the <code>flex-basis</code> for this item.</p> + +<p>If your item is instead auto-sized, then <code>auto</code> resolves to the size of its content. At this point your knowledge of <code>min-</code> and <code>max-content</code> sizing becomes useful, as flexbox will take the <code>max-content</code> size of the item as the <code>flex-basis</code>. The following live example can help to demonstrate this.</p> + +<p>In this example I have created a series of inflexible boxes, with both <code>flex-grow</code> and <code>flex-shrink</code> set to <code>0</code>. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a <code>flex-basis</code> of <code>150px</code>, whereas the other two items have no width and so are sized according to their content width.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p> + +<p>In addition to the <code>auto</code> keyword, you can use the <code>content</code> keyword as the <code>flex-basis</code>. This will result in the <code>flex-basis</code> 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 <code>auto</code> as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.</p> + +<p>If you want flexbox to completely ignore the size of the item when doing space distribution then set <code>flex-basis</code> to <code>0</code>. 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 <code>flex-grow</code>.</p> + +<h2 id="The_flex-grow_property" name="The_flex-grow_property">flex-grow プロパティ</h2> + +<p>The {{CSSxRef("flex-grow")}} property specifies the <strong>flex grow factor</strong>, 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.</p> + +<p>If all of your items have the same <code>flex-grow</code> factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use <code>1</code> as the value, however you could give them all a <code>flex-grow</code> of <code>88</code>, or <code>100</code>, or <code>1.2</code> 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.</p> + +<h3 id="Combining_flex-grow_and_flex-basis" name="Combining_flex-grow_and_flex-basis"><code>flex-grow</code> と <code>flex-basis</code> を組み合わせる</h3> + +<p>Things can get confusing in terms of how <code>flex-grow</code> and <code>flex-basis</code> interact. Let's consider the case of three flex items of differing content lengths and the following <code>flex</code> rules applied to them:</p> + +<p><code>flex: 1 1 auto;</code></p> + +<p>In this case the <code>flex-basis</code> value is <code>auto</code> and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the <code>max-content</code> 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:</p> + +<p><img alt="Images shows the positive free space as a hatched area" src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> + +<p>We are working with a <code>flex-basis</code> 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:</p> + +<p><img alt="The positive space is distributed between items" src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p> + +<p>If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:</p> + +<p><code>flex: 1 1 0;</code></p> + +<p>Here we are saying that the size of the item for the purposes of our space distribution calculation is <code>0</code> — all the space is up for grabs and as all of the items have the same <code>flex-grow</code> factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.</p> + +<p>Try changing the <code>flex-grow</code> factor from 1 to 0 in this live example to see the different behavior:</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p> + +<h3 id="Giving_items_different_flex-grow_factors" name="Giving_items_different_flex-grow_factors">アイテムに別の flex-grow 要素を与える</h3> + +<p>Our understanding of how <code>flex-grow</code> works with <code>flex-basis</code> allows us to have further control over our individual item sizes by assigning items different <code>flex-grow</code> factors. If we keep our <code>flex-basis</code> at <code>0</code> so all of the space can be distributed, we could assign each of the three flex items a different <code>flex-grow</code> factor. In the example below I am using the following values:</p> + +<ul> + <li><code>1</code> for the first item.</li> + <li><code>1</code> for the second item.</li> + <li><code>2</code> for the third item.</li> +</ul> + +<p>Working from a <code>flex-basis</code> of <code>0</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p> + +<p>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 <code>.25</code>, <code>.25</code>, and <code>.50</code> — you should see the same result.</p> + +<h2 id="The_flex-shrink_property" name="The_flex-shrink_property"><code>flex-shrink</code> プロパティ</h2> + +<p>The {{CSSxRef("flex-shrink")}} property specifies the <strong>flex shrink factor</strong>, 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.</p> + +<p>This property deals with situations where the browser calculates the <code>flex-basis</code> values of the flex items, and finds that they are too large to fit into the flex container. As long as <code>flex-shrink</code> has a positive value the items will shrink in order that they do not overflow the container.</p> + +<p>So where <code>flex-grow</code> deals with adding available space, <code>flex-shrink</code> manages taking away space to make boxes fit into their container without overflowing.</p> + +<p>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 <code>flex-shrink</code> set to <code>0</code> the items are not allowed to shrink and so they overflow the box.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p> + +<p>Change the <code>flex-shrink</code> value to <code>1</code> 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.</p> + +<h3 id="Combining_flex-shrink_and_flex-basis" name="Combining_flex-shrink_and_flex-basis"><code>flex-shrink</code> と <code>flex-basis</code> を組み合わせる</h3> + +<p>You could say that <code>flex-shrink</code> works in pretty much the same way as <code>flex-grow</code>. However there are two reasons why it isn’t <em>quite</em> the same.</p> + +<p>While it is usually subtle, defined in the specification is one reason why <code>flex-shrink</code> isn’t quite the same for negative space as <code>flex-grow</code> is for positive space:</p> + +<blockquote> +<p>“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.”</p> +</blockquote> + +<p>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 <code>min-content</code> size — the size that they become if they take advantage of any soft wrapping opportunities available to them.</p> + +<p>You can see this <code>min-content</code> flooring happen in the below example, where the <code>flex-basis</code> 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 <code>min-content</code> size. As the box gets smaller space is then just removed from the third item.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p> + +<p>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.</p> + +<h3 id="Giving_items_different_flex-shrink_factors" name="Giving_items_different_flex-shrink_factors">アイテムに別の <code>flex-shrink</code> 要素を与える</h3> + +<p>In the same way as <code>flex-grow</code>, you can give flex-items different <code>flex-shrink</code> 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.</p> + +<p>In the following live example the first item has a <code>flex-shrink</code> factor of 1, the second <code>0</code> (so it won’t shrink at all), and the third <code>4</code>. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for <code>flex-grow</code> you can use decimals or larger numbers here. Choose whatever makes most sense to you.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p> + +<h2 id="Mastering_sizing_of_flex_items" name="Mastering_sizing_of_flex_items">flex アイテムのサイズ設定をマスターする</h2> + +<p>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:</p> + +<h3 id="What_sets_the_base_size_of_the_item" name="What_sets_the_base_size_of_the_item">アイテムの基本サイズを何がセットするか？</h3> + +<ol> + <li>Is <code>flex-basis</code> set to <code>auto</code>, and does the item have a width set? If so, the size will be based on that width.</li> + <li>Is <code>flex-basis</code> set to <code>auto</code> or <code>content</code> (in a supporting browser)? If so, the size is based on the item size.</li> + <li>Is <code>flex-basis</code> a length unit, but not zero? If so this is the size of the item.</li> + <li>Is <code>flex-basis</code> set to <code>0</code>? if so then the item size is not taken into consideration for the space-sharing calculation.</li> +</ol> + +<h3 id="Do_we_have_available_space" name="Do_we_have_available_space">利用できるスペースが残っているか？</h3> + +<p>Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.</p> + +<ol> + <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>less</strong> than the total width (or height) of the container? If so, then you have positive free space and <code>flex-grow</code> comes into play.</li> + <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>more</strong> than the total width (or height) of the container? If so, you have negative free space and <code>flex-shrink</code> comes into play.</li> +</ol> + +<h3 id="Other_ways_to_distribute_space" name="Other_ways_to_distribute_space">スペースを配分する別の方法</h3> + +<p>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.</p> + +<p>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.</p> diff --git a/files/ja/web/css/css_flexible_box_layout/index.html b/files/ja/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..efe2e9fa39 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/index.html @@ -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 +--- +<div>{{CSSRef}}</div> + +<p class="summary"><ruby><strong>CSS フレックスボックスレイアウト</strong><rp> (</rp><rt>CSS Flexible Box Layout</rt><rp>) </rp></ruby>は <a href="/ja/docs/Web/CSS">CSS</a> のモジュールの一つで、ユーザーインターフェイスの設計に最適化された CSS ボックスモデルと、一次元のアイテムのレイアウトを定義します。フレックスレイアウトモデルでは、フレックスコンテナーの子は任意の方向にレイアウトすることができ、また使われていない空間を埋めるために伸長したり、あるいは親のあふれることを避けるために収縮したりと、そのサイズを「伸縮」することができます。子の水平方向と垂直方向の両方の整列を、容易に操作することが可能です。</p> + +<h2 id="Basic_Example" name="Basic_Example">基本的な例</h2> + +<p>以下の例では、コンテナーに <code>display: flex</code> に設定されており、 3 つの子がフレックスアイテムであることを意味しています。 <code>justify-content</code> の値は、主軸上に均等に配置するため、 <code>space-between</code> に設定されています。それぞれのアイテムと、その左右のアイテムとの間は等しい間隔で配置され、フレックスコンテナーの両端に揃えられます。また、 <code>align-items</code> の既定値は <code>stretch</code> なので、アイテムが交差軸方向に引き伸ばされていることが分かります。アイテムはフレックスコンテナーの高さまで引き伸ばされ、最も高さが大きいアイテムと同じ高さで表示されます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Reference" name="Reference">リファレンス</h2> + +<h3 id="CSS_Properties" name="CSS_Properties">CSS プロパティ</h3> + +<div class="index"> +<ul> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Alignment_Properties" name="Alignment_Properties">配置プロパティ</h3> + +<p><code>align-content</code>, <code>align-self</code>, <code>align-items</code>, <code>justify-content</code> の各プロパティは、当初はフレックスボックスの仕様書にありましたが、ボックス配置の仕様書で定義されるようになりました。フレックスボックスの仕様書はボックス配置の最新の定義を参照するようになりました。ボックス配置では新しい配置プロパティも定義されるようになりました。</p> + +<div class="index"> +<ul> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("place-content")}}</li> + <li>{{cssxref("place-items")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="Glossary_entries" name="Glossary_entries">用語集の項目</h3> + +<div class="index"> +<ul> + <li>{{Glossary("Flexbox", "フレックスボックス", 1)}}</li> + <li>{{Glossary("Flex Container", "フレックスコンテナー", 1)}}</li> + <li>{{Glossary("Flex Item", "フレックスアイテム", 1)}}</li> + <li>{{Glossary("Main Axis", "主軸", 1)}}</li> + <li>{{Glossary("Cross Axis", "交差軸", 1)}}</li> + <li>{{Glossary("Flex", "フレックス", 1)}}</li> +</ul> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<dl> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></dt> + <dd>フレックスボックスの機能の概要</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a></dt> + <dd>フレックスボックスが他のレイアウト方法や他の CSS 仕様書とどのように関係しているか</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナーにおけるアイテムの配置</a></dt> + <dd>ボックス配置プロパティがどのようにフレックスボックスに働くか</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">フレックスアイテムの順序</a></dt> + <dd>アイテムの順序や向きを変更する様々な方法を説明し、その上での潜在的な問題を紹介します。</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">主軸に沿ったフレックスアイテムの比率の操作</a></dt> + <dd>flex-grow, flex-shrink, flex-basis の各プロパティについての説明です。</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></dt> + <dd>複数行のフレックスコンテナーを作成する方法と、それらの行内でのアイテムの表示方法の制御。</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">典型的なフレックスボックスの用途</a></dt> + <dd>典型的なフレックスボックスの用途の一般的なデザインパターン。</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">フレックスボックスの後方互換性</a></dt> + <dd>フレックスボックスのブラウザーの互換性状況、相互運用性の問題、古いブラウザーと古い仕様書のバージョンの対応</dd> +</dl> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>コミュニティによって整理されているフレックスボックスに関するブラウザーのバグと回避方法の一覧</dd> + <dt><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">ブラウザーに依存しないフレックスボックスのミックスイン</a></dt> + <dd>この記事では、最近のフレックスボックス構文に対応していない古いブラウザーでも動作するような、ブラウザーに依存しないフレックスボックスの操作を作りたい人のために、ミックスインの一式を提供します。</dd> +</dl> 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 new file mode 100644 index 0000000000..ef3f6ed3d9 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -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 +--- +<p class="summary">フレックスボックスは一次元のレイアウトとして設計されており、つまりアイテムを行または列として扱います。 — しかし、同時ではありません。しかし、フレックスアイテムを新しい行に折り返し、 {{cssxref("flex-direction")}} が <code>row</code> の場合は新しい行を、 <code>flex-direction</code> が <code>column</code> の場合は新しい列を生成します。このガイドでは、これがどのように動作するのか、何のために設計されているのか、どのような場合にフレックスボックスより <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>が必要になるかを説明します。</p> + +<h2 id="Making_things_wrap" name="Making_things_wrap">折り返しを行う</h2> + +<p>The initial value of the {{cssxref("flex-wrap")}} property is <code>nowrap</code>. 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 <code>flex-wrap</code> property with a value of <code>wrap</code>, or use the shorthand {{cssxref("flex-flow")}} with values of <code>row wrap</code> or <code>column wrap</code>.</p> + +<p>Items will then wrap in the container. In the next example I have ten items all with a <code>flex-basis</code> of <code>160px</code> 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p> + +<h2 id="Wrapping_and_flex-direction" name="Wrapping_and_flex-direction">折り返しと flex-direction</h2> + +<p>Wrapping works as you might expect when combined with <code>flex-direction</code>. If <code>flex-direction</code> is set to <code>row-reverse</code> then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p> + +<p>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!</p> + +<h2 id="Single-dimensional_layout_explained" name="Single-dimensional_layout_explained">一次元のレイアウトの説明</h2> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p> + +<p>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.</p> + +<h2 id="How_do_flexbox-based_grid_systems_work" name="How_do_flexbox-based_grid_systems_work">フレックスボックスベースのグリッドシステムはどのように動作するか</h2> + +<p>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 <code>flex-basis</code> or by adding a width to the item itself leaving the value of <code>flex-basis</code> as <code>auto</code> — you can get the impression of a two dimensional layout. You can see this working in the example below.</p> + +<p>Here I have set <code>flex-grow</code> and <code>flex-shrink</code> to <code>0</code> to make inflexible flex items and am then controlling flexibility using percentages, just like we used to do in float layouts.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p> + +<p>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.</p> + +<h2 id="Creating_gutters_between_items" name="Creating_gutters_between_items">アイテム間の溝の作成</h2> + +<p>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 <a href="https://www.w3.org/TR/css-align-3/">Box Alignment module</a> for Flexbox. In the future we will be able to simply use <code>row-gap</code> and <code>column-gap</code> for flexbox as we do for CSS Grid. At the current time you will need to use margins to achieve this.</p> + +<p>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.</p> + +<p>It is this requirement that the gap properties, once implemented, will solve for us. Proper gaps only happen on the inside edges of items.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p> + +<h2 id="Collapsed_items" name="Collapsed_items">アイテムの折りたたみ</h2> + +<p>The flexbox specification details what should happen if a flex item is collapsed by setting <code>visibility: collapse</code> on an item. See the MDN documentation for the {{cssxref("visibility")}} property. The specification describes the behaviour as follows:</p> + +<blockquote> +<p>“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.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Collapsed items</a></p> +</blockquote> + +<p>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.</p> + +<p>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 <code>visibility: collapse</code> and therefore the flex container is retaining a <em>strut</em> of the height required to display this item. If you remove <code>visibility: collapse</code> from the CSS or change the value to <code>visible</code>, you will see the item disappear and the space redistribute between non-collapsed items; the height of the flex container should not change.</p> + +<div class="note"> +<p><strong>Note</strong>: Use Firefox for the below two examples as Chrome and Safari treat collapse as hidden.</p> +</div> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p> + +<p>When dealing with multiple-line flex containers however you need to understand that the wrapping is re-done <em>after</em> 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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p> + +<p>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.</p> + +<h3 id="The_difference_between_visibility_hidden_and_display_none" name="The_difference_between_visibility_hidden_and_display_none"><code>visibility: hidden</code> と <code>display: none</code> の違い</h3> + +<p>When you set an item to <code>display: none</code> 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 <code>visibility: hidden</code> 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.</p> + +<p>{{CSSRef}}</p> diff --git a/files/ja/web/css/css_flexible_box_layout/mixins/index.html b/files/ja/web/css/css_flexible_box_layout/mixins/index.html new file mode 100644 index 0000000000..42426babe4 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/mixins/index.html @@ -0,0 +1,368 @@ +--- +title: クロスブラウザのフレックスボックスのミックスイン +slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins +tags: + - CSS + - CSS フレックスボックス + - ミックスイン + - リファレンス +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins +--- +<div>{{cssref}}</div> + +<p class="summary">この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。</p> + +<p>このセットは次のものを使用します。</p> + +<ul> + <li>2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)</li> + <li>最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)</li> +</ul> + +<p>原文:</p> + +<ul> + <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li> +</ul> + +<p>参考文献:</p> + +<ul> + <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li> + <li><s><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></s></li> + <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li> + <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li> + <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks</a></li> + <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Visual Guide to CSS3 Flexbox: Flexbox Playground |</a></li> +</ul> + +<div class="note"><strong>メモ:</strong> ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。</div> + +<h3 id="Flexbox_containers" name="Flexbox_containers">フレックスボックスのコンテナー</h3> + +<p> {{cssxref("display")}} プロパティに <code>flex</code> の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 <code>inline-flex</code> の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。</p> + +<ul> + <li>値: <code>flex</code> | <code>inline-flex</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-containers">https://drafts.csswg.org/css-flexbox/#flex-containers</a></li> +</ul> + +<pre class="brush: css">@mixin flexbox { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +//Using this mixin +%flexbox { @include flexbox; }</pre> + +<div> +<pre class="brush: css">@mixin inline-flex { + display: -webkit-inline-box; + display: -moz-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +%inline-flex { @include inline-flex; }</pre> +</div> + +<h3 id="Flexbox_direction" name="Flexbox_direction">フレックスボックスの方向</h3> + +<p>The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.</p> + +<ul> + <li>値: <code>row</code> (default) | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">https://drafts.csswg.org/css-flexbox/#flex-direction-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + -moz-box-direction: reverse; + -moz-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + -moz-box-direction: normal; + -moz-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + -moz-box-direction: reverse; + -moz-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + -moz-box-direction: normal; + -moz-box-orient: horizontal; + } + -webkit-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; +} + +// Shorter version: +@mixin flex-dir($args...) { @include flex-direction($args...); }</pre> +</div> + +<h3 id="Flexbox_wrap" name="Flexbox_wrap">フレックスボックスの折り返し</h3> + +<p>The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.</p> + +<ul> + <li>値: <code>nowrap</code> (default) | <code>wrap</code> | <code>wrap-reverse</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">https://drafts.csswg.org/css-flexbox/#flex-wrap-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-wrap($value: nowrap) { + // No Webkit/FF Box fallback. + -webkit-flex-wrap: $value; + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + flex-wrap: $value; +}</pre> +</div> + +<h3 id="Flexbox_flow_(shorthand)" name="Flexbox_flow_(shorthand)">フレックスボックスのフロー (一括指定)</h3> + +<p>The {{cssxref("flex-flow")}} property is shorthand for setting the <code>flex-direction</code> and <code>flex-wrap</code> properties, which together define the flex container's main and cross axes.</p> + +<ul> + <li>値: <code>row</code> (default) | <code>nowrap</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">https://drafts.csswg.org/css-flexbox/#flex-flow-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) { + // No Webkit/FF Box fallback. + -webkit-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; +}</pre> +</div> + +<h3 id="Flexbox_order" name="Flexbox_order">フレックスボックスの順序</h3> + +<p>The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#order-property">https://drafts.csswg.org/css-flexbox/#order-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin order($int: 0) { + -webkit-box-ordinal-group: $int + 1; + -moz-box-ordinal-group: $int + 1; + -webkit-order: $int; + -ms-flex-order: $int; + order: $int; +}</pre> +</div> + +<h3 id="Flexbox_grow" name="Flexbox_grow">フレックスボックスの伸長</h3> + +<p>The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">https://drafts.csswg.org/css-flexbox/#flex-grow-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-grow($int: 1) { + -webkit-box-flex: $int; + -moz-box-flex: $int; + -webkit-flex-grow: $int; + -ms-flex: $int; + flex-grow: $int; +}</pre> +</div> + +<h3 id="Flexbox_shrink" name="Flexbox_shrink">フレックスボックスの縮小</h3> + +<p>The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.</p> + +<ul> + <li>Value: any integer (0 is the default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">https://drafts.csswg.org/css-flexbox/#flex-shrink-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-shrink($int: 0) { + -webkit-flex-shrink: $int; + -moz-flex-shrink: $int; + -ms-flex: $int; + flex-shrink: $int; +}</pre> +</div> + +<h3 id="Flexbox_basis" name="Flexbox_basis">フレックスボックスの basis</h3> + +<p>The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.</p> + +<ul> + <li>値: See the {{cssxref("flex-basis")}} reference (the default is<code> auto</code>)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">https://drafts.csswg.org/css-flexbox/#flex-basis-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex-basis($value: auto) { + -webkit-flex-basis: $value; + flex-basis: $value; +}</pre> +</div> + +<h3 id="Flexbox_flex_(shorthand)" name="Flexbox_flex_(shorthand)">フレックスボックスの "flex" (一括指定)</h3> + +<p>The {{cssxref("flex")}} property specifies the components of a flexible length; <code>flex-grow</code> factor, <code>flex-shrink</code> factor, and the <code>flex-basis</code>. When an element is a flex item, <code>flex</code> is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, <code>flex</code> has no effect.</p> + +<ul> + <li>値: See the {{cssxref("flex")}} reference for values and default</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-property">https://drafts.csswg.org/css-flexbox/#flex-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) { + + // Set a variable to be used by box-flex properties + $fg-boxflex: $fg; + + // Box-Flex only supports a flex-grow value so lets grab the + // first item in the list and just return that. + @if type-of($fg) == 'list' { + $fg-boxflex: nth($fg, 1); + } + + -webkit-box: $fg-boxflex; + -moz-box: $fg-boxflex; + -webkit-flex: $fg $fs $fb; + -ms-flexbox: $fg $fs $fb; + flex: $fg $fs $fb; +}</pre> +</div> + +<h3 id="Flexbox_justify_content" name="Flexbox_justify_content">フレックスボックスのコンテンツの位置揃え</h3> + +<p>The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</p> + +<div class="note"> +<p><strong>Note</strong>: <code>space-*</code> values not supported in older syntaxes.</p> +</div> + +<ul> + <li>値: <code>flex-start</code> (default) | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">https://drafts.csswg.org/css-flexbox/#justify-content-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin justify-content($value: flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -moz-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -moz-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + -moz-box-pack: justify; + -ms-flex-pack: justify; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else { + -webkit-box-pack: $value; + -moz-box-pack: $value; + -ms-flex-pack: $value; + } + -webkit-justify-content: $value; + justify-content: $value; +} + // Shorter version: + @mixin flex-just($args...) { @include justify-content($args...); }</pre> +</div> + +<h3 id="Flexbox_align_items" name="Flexbox_align_items">フレックスボックスの項目の配置</h3> + +<p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to <code>justify-content</code> but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, <code>align-self</code> always matches the value of <code>align-items</code> on their associated flex container.)</p> + +<ul> + <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -moz-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -moz-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -moz-box-align: $value; + -ms-flex-align: $value; + } + -webkit-align-items: $value; + align-items: $value; +}</pre> +</div> + +<h3 id="Flexbox_align_self" name="Flexbox_align_self">フレックスボックスの自己配置</h3> + +<p>Values: <code>auto</code> (default) | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></p> + +<p>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></p> + +<div> +<pre class="brush: css">@mixin align-self($value: auto) { + // No Webkit Box Fallback. + -webkit-align-self: $value; + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + align-self: $value; +}</pre> +</div> + +<h3 id="Flexbox_align_content" name="Flexbox_align_content">フレックスボックスのコンテンツの配置</h3> + +<p>The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <code>justify-content</code> aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.</p> + +<ul> + <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (default)</li> + <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">https://drafts.csswg.org/css-flexbox/#align-content-property</a></li> +</ul> + +<div> +<pre class="brush: css">@mixin align-content($value: stretch) { + // No Webkit Box Fallback. + -webkit-align-content: $value; + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + align-content: $value; +}</pre> +</div> 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 new file mode 100644 index 0000000000..8a2a488baa --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/ordering_flex_items/index.html @@ -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 +--- +<p>{{CSSRef}}</p> + +<p>フレックスボックスやグリッドといった新しいレイアウト方法には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法についてみていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。</p> + +<h2 id="Reverse_the_display_of_the_items" name="Reverse_the_display_of_the_items">アイテムを逆順に表示する</h2> + +<p>{{cssxref("flex-direction")}} プロパティは以下の４つの値から一つを設定できます。</p> + +<ul> + <li><code>row</code></li> + <li><code>column</code></li> + <li><code>row-reverse</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p>上２つの値は、アイテムの順序を文書のソースに現れる順と同じ順序で、始点から連続して表示します。</p> + +<p><img alt="左から始まり一行に表示されるアイテム" src="https://mdn.mozillademos.org/files/15649/Basics1.png" style="display: flex; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p><img alt="上から始まり一列に表示されるアイテム" src="https://mdn.mozillademos.org/files/15650/align10.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>下２つの値は始点と終点を入れ替えて、アイテムを逆順に表示します。</p> + +<p><img alt="右側から逆順に表示されるアイテム" src="https://mdn.mozillademos.org/files/15651/align9.png" style="display: flex; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="下側から逆順に一列に表示されるアイテム" src="https://mdn.mozillademos.org/files/15652/align11.png" style="display: flex; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>始点は書字方向に応じて変わるということを思い出してください。先ほどの例のうち行についてのものは、<code>row</code> と <code>row-reverse</code> が英語のような左から右の言語においてどのように作用するかを示しています。アラビア語のような右から左の言語を使用している場合には、<code>row</code> では右から始まり <code>row-reverse</code> では左から始まります。</p> + +<p><img alt="アラビア文字の場合に row が右から始まり、 row-reverse では左から始まることを示すフレックスコンテナー" src="https://mdn.mozillademos.org/files/15647/order-rtl.png" style="display: flex; height: 302px; margin: 0px auto; width: 528px;"></p> + +<p>これは、アイテムが<em>表示上</em>でのみ逆順になるという点に注意が必要ではあるものの、アイテムを逆順に表示するための素晴らしい方法にみえます。この点については仕様の中で以下の様に触れられています。</p> + +<blockquote> +<p>“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.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a></p> + +<p>(注：フレックスレイアウトの順序変更の機能は、意図的に表示のレンダリングにのみ影響するようになっており、読み上げの順序やナビゲーションがソースコード順に従うという挙動には影響しません。これにより作成者は、CSS 非対応の UA や読み上げや逐次ナビゲーションといった線形のモデルをソースの順序に保ったまま、視覚表現についての操作をすることができるようになります。 <a href="https://www.w3.org/TR/css-flexbox-1/#flow-order">Ordering and Orientation</a> より引用)</p> +</blockquote> + +<p>仮にアイテムがリンクなどのようなタブで移動できる要素であったとすると、その移動順は表示されている順序ではなく、文書のソースに現れる順となります。</p> + +<p>逆順の値を設定しているときやそのほかの方法でアイテムの順序を変更している場合、本当にソース上で論理的な順序を変更しなくてよいか考慮する必要があります。仕様の中でも先ほどの注に続けて、ソースの問題を修正するために順序設定を利用するべきではないという記載があります。</p> + +<blockquote> +<p>“Authors <em>must not</em> 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.”</p> + +<p>(文書のアクセシビリティを損なうため、order や flex-flow/flex-direction の <em>-reverse</em> 値をソース順序の修正の代用として利用してはいけません。)</p> +</blockquote> + +<div class="note"> +<p><strong>注</strong>: 数年間にわたって Firefox には、ブラウザーの挙動と異なりソース上の順序ではなく表示上の順序に従うというバグがありました。このバグは現在は修正されています。最新のユーザーエージェントは仕様に従っているものとして、常にソース上の順序を文書の論理的な順序として扱うべきです。</p> +</div> + +<p>以下の例ではリンクからリンクにタブ移動した際に、どれがハイライトされているかわかりやすいように focus スタイルを加えています。<code>flex-direction</code> を使って表示順を変更した場合でも、タブ順序はソース上の順序に従って移動することがわかります。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}</p> + +<p><code>flex-direction</code> の変更がナビゲーションの順序を変更しないのと同様に、描画の順序についても変更されることはありません。あくまでアイテムの表示上の順序が逆転するだけです。</p> + +<h2 id="The_order_property" name="The_order_property">order プロパティ</h2> + +<p>フレックスアイテムが表示される順序を逆転することができましたが、それに加えて {{cssxref("order")}} プロパティを使用することでアイテム個別に表示される順序を変更することができます。</p> + +<p><code>order</code> プロパティはアイテムのレイアウトを<em>数字で順序づけたグループ</em>にレイアウトするよう設計されています。つまりアイテムはグループ内での順序を表す整数に割り当てられ、その数字が小さい順に表示されるということです。同じ数字が複数のアイテムに割り当てられているときは、ソース上に現れる順に表示されます。</p> + +<p>例として、５つのアイテムに対して以下のように <code>order</code> を割り当てます。</p> + +<ul> + <li>ソース上で１番目のアイテム: <code>order: 2</code></li> + <li>ソース上で２番目のアイテム: <code>order: 3</code></li> + <li>ソース上で３番目のアイテム: <code>order: 1</code></li> + <li>ソース上で４番目のアイテム: <code>order: 3</code></li> + <li>ソース上で５番目のアイテム: <code>order: 1</code></li> +</ul> + +<p>このときアイテムは以下の順序でページ上に表示されます。</p> + +<ul> + <li>ソース上で３番目のアイテム: <code>order: 1</code></li> + <li>ソース上で５番目のアイテム: <code>order: 1</code></li> + <li>ソース上で１番目のアイテム: <code>order: 2</code></li> + <li>ソース上で２番目のアイテム: <code>order: 3</code></li> + <li>ソース上で４番目のアイテム: <code>order: 3</code></li> +</ul> + +<p><img alt="ソース上の順序を示す番号を表示している順序変更されたアイテム" src="https://mdn.mozillademos.org/files/15653/order-property.png" style="display: flex; height: 100px; margin: 0px auto; width: 634px;"></p> + +<p>以下の例で値を変更して、表示順がどのように変わるか試してみてください。また <code>flex-direction</code> を <code>row-reverse</code> に変えたときに何が起こるか、つまり始点が変わるために反対側から並べられることを確かめましょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}</p> + +<p>フレックスアイテムのデフォルトの <code>order</code> は <code>0</code> です。したがって 0 より大きい <code>order</code> をもつアイテムは、明示的に <code>order</code> を指定されていないアイテムの後ろに表示されます。</p> + +<p><code>order</code> には負の値を指定することもでき、ほかのアイテムはそのままの順序を保ちながら一つのアイテムだけを先頭に表示したい場合になどに有用です。先頭に表示したいアイテムに <code>order: -1</code> を設定することで、0 より小さい <code>order</code> のこのアイテムが常に先頭に表示されるようになります。</p> + +<p>以下の例では フレックスボックスを使ってレイアウトをしています。HTML の中で指定されている <code>active</code> クラスを別のアイテムに付け替えることで、レイアウトの先頭に幅すべてを使って表示されるアイテムを変更することができ、残りのアイテムは次の行に表示されるようになります。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}</p> + +<p>アイテムは仕様の中で <em>order-modified document order</em> として述べられているものに従って表示されます。アイテムが表示される前に、<code>order</code> プロパティの値が考慮されます。</p> + +<p><code>order</code> はアイテムの描画順についても変更します。<code>order</code> の値が小さいものから先に描画され、大きくなる順に描画されていきます。</p> + +<h2 id="The_order_property_and_accessibility" name="The_order_property_and_accessibility">order プロパティとアクセシビリティ</h2> + +<p><code>order</code> プロパティの使用は、<code>flex-direction</code> による方向の変更と同様のアクセシビリティに対する影響があります。<code>order</code> は描画の順序および表示上の順序を変更しますが、逐次的なナビゲーションの順序は変更しません。そのため、もしユーザーがアイテム間の移動をタブによって行った場合、レイアウト中を混乱するような動作で飛び回っているように見えるでしょう。</p> + +<p>この記事中の例でタブ移動を試すことで、<code>order</code> がポインティングデバイスを使わないユーザーにおかしな経験をさせてしまう可能性があることがわかるでしょう。表示上の順序と論理的な順序の分断とそれによって起こりうるアクセシビリティの問題についてさらに理解するためには、以下のページを参照してください。</p> + +<ul> + <li><a href="https://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox and the keyboard navigation disconnect</a></li> + <li><a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">HTML Source Order vs CSS Display Order</a></li> + <li><a href="https://alastairc.ac/2017/06/the-responsive-order-conflict">The Responsive Order Conflict for Keyboard Focus</a></li> +</ul> + +<h2 id="Use_cases_for_order" name="Use_cases_for_order">order の利用場面</h2> + +<p>フレックスアイテムの論理的な順序、そして読むときの順序が表示上の順序と分かれていることが役に立つ場合があります。気をつけて使えば <code>order</code> プロパティは、いくつかのよくあるパターンを簡単に実装するために役に立ちます。</p> + +<p>例えばニュース記事を表示するカードのデザインがあったとします。ニュースの見出しはハイライトされる重要なもので、またユーザーが読みたいものを探すためにタブでほかの見出しからジャンプする対象となる要素でもあります。カードには日付もあり、作りたいデザインは以下のようなものであるとします。</p> + +<p><img alt="日付が先頭にあり、見出しと本文がそれに続いているデザインコンポーネント" src="https://mdn.mozillademos.org/files/15648/order-card.png" style="height: 400px; width: 618px;"></p> + +<p>表示上では日付が見出しの上に現れています。しかしスクリーンリーダーによって読み上げられるときには、タイトルが先に読まれて日付はその後が望ましいと思っているとします。こういったことを <code>order</code> プロパティで実現することができます。</p> + +<p>カードをフレックスコンテナーとして、<code>flex-direction</code> を <code>column</code> に設定します。そして、日付に <code>order: -1</code> を設定します。これによって見出しの上に日付を引き上げることができます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}</p> + +<p>この例のような細かな調整は <code>order</code> プロパティを使うのにふさわしい状況です。読むためやタブ移動のための論理的な順序を保ち、アクセシビリティと構造化された形を維持してください。そして <code>order</code> プロパティは純粋に視覚的なデザインの調整のために使ってください。その際にはユーザーがキーボードでタブ移動をする対象となるアイテムの順序変更をしていないか留意してください。特に比較的新しいレイアウトを使うときには、マウスやタッチスクリーンではなく、キーボードのみによるサイト操作の確認を確実にテストに含めた方がよいでしょう。そのテストで、開発時の選択がコンテンツの移動を難しくしてしまっているかどうか、すぐにわかるようになるでしょう。</p> 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 new file mode 100644 index 0000000000..1eeaa99bbb --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -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 +--- +<div>{{CSSRef}}</div> + +<p class="summary">この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。</p> + +<div class="note"> +<p><strong>メモ</strong>: CSS のバージョン 1 とバージョン 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。</p> +</div> + +<h2 id="The_box_alignment_module" name="The_box_alignment_module">ボックス配置モジュール</h2> + +<p>多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。</p> + +<p>これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では <a href="https://www.w3.org/TR/css-align-3/">Box Alignment Specification</a> の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿ったスペースの分配についても扱っています。</p> + +<p>ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。</p> + +<blockquote> +<p>メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。</p> + +<p>(訳注: <a href="https://www.w3.org/TR/css-flexbox-1/#alignment">https://www.w3.org/TR/css-flexbox-1/#alignment</a> より引用)</p> +</blockquote> + +<p>このガイドの後の記事「フレックスコンテナーでのアイテムの配置」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。</p> + +<h3 id="The_gap_properties" name="The_gap_properties">gap プロパティ</h3> + +<p>ボックス配置仕様書に最近追加されたものが、 {{cssxref("row-gap")}} プロパティ と {{cssxref("column-gap")}} プロパティ、およびこれらの一括指定プロパティ {{cssxref("gap")}} です。これらのプロパティは、はじめは CSS Grid 仕様の中で、それぞれ <code>grid-row-gap</code>, <code>grid-column-gap</code>, <code>grid-gap</code> として定義されていましたが、フレックスボックスを含めたすべてのレイアウト方法で使用できるように名前が変更され Box Alignment に移動されました。各ブラウザーがフレックスボックスの <code>gap</code> プロパティを実装するまでは、アイテム間にギャップを作るには {{cssxref("margin")}} プロパティを使うことになります。</p> + +<h2 id="Writing_Modes" name="Writing_Modes">書字方向</h2> + +<p>「<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a>」の記事で、フレックスボックスが<strong>書字方向対応</strong>であることに触れました。書字方向については CSS の <a href="https://www.w3.org/TR/css-writing-modes-3/">Writing Modes specification</a> で詳細に記されており、国によって異なる様々な書字方向をどのように CSS がサポートしているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。 <strong>block</strong> 方向と <strong>inline</strong> 方向について理解することが、新しいレイアウト方法の鍵となります。</p> + +<p>コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、<a href="https://24ways.org/2016/css-writing-modes/">この記事</a>を参照してください。</p> + +<h3 id="Writing_mode" name="Writing_mode">書字方向</h3> + +<p>Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。</p> + +<ul> + <li><code>horizontal-tb</code></li> + <li><code>vertical-rl</code></li> + <li><code>vertical-lr</code></li> + <li><code>sideways-rl</code></li> + <li><code>sideways-lr</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} </p> + +<p><code>sideways-rl</code> と <code>sideways-lr</code> の対応は現時点では Firefox のみということに注意してください。また <code>writing-mode</code> とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については <a href="/docs/Web/CSS/writing-mode">MDN の書字方向のドキュメント</a>に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。</p> + +<p>CSS の <code>writing-mode</code> プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で <code>html</code> 要素に <code>dir</code> 属性と <code>lang</code> 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS がロードされなかったとしても文書を正しく表示することができます。</p> + +<h2 id="Flexbox_and_other_layout_methods" name="Flexbox_and_other_layout_methods">フレックスボックスと他のレイアウト方法</h2> + +<p>フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に<a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">起こることの定義</a>が含まれています。例えば <code>float</code> 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。</p> + +<p><code>display: flex</code> に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。</p> + +<p>フレックスアイテムについては、ある要素は浮動 (<code>float</code>) や解除 (<code>clear</code>) が設定されていて、その上で親要素に <code>display: flex</code> が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。<code>inline-block</code> やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。</p> + +<p>次の例では、子要素は浮動設定されており、コンテナーには <code>display: flex</code> が設定されています。<code>display: flex</code> を削除すると、解除が適用されていないため <code>.box</code> が折りたたまれます。再度 <code>display: flex</code> を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}</p> + +<h2 id="Flexbox_and_Grid_Layout" name="Flexbox_and_Grid_Layout">フレックスボックとグリッドレイアウト</h2> + +<p><a href="/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている <code>flex</code> プロパティは無視されるようになります。</p> + +<p>ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。</p> + +<h3 id="Flex_and_grid_—_whats_the_difference" name="Flex_and_grid_—_what's_the_difference">フレックスとグリッドの違いは？</h3> + +<p>フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜ所々同じことをしているように見える２つの仕様がわざわざあるのか？というのはよくある疑問です。</p> + +<p>この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。スペースの分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}</p> + +<p>同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}</p> + +<p>これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。</p> + +<p>場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。</p> + +<p>経験則として、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。</p> + +<p>グリッドとフレックスボックスのさらに詳しい比較については<a href="/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">「グリッドレイアウトと他レイアウト方法との関係」</a>の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。</p> + +<h2 id="Flexbox_and_display_contents" name="Flexbox_and_display_contents">フレックスボックスと display: contents</h2> + +<p>{{cssxref("display")}} プロパティの値 <code>contents</code> は、仕様書の中で以下のように述べられている新しい値です。</p> + +<blockquote> +<p>「要素自体はボックスを生成しませんが、その子要素や疑似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や疑似要素によって置き換えられたように扱わなければなりません」</p> + +<p>(訳注: <a href="https://www.w3.org/TR/css-display-3/#box-generation">https://www.w3.org/TR/css-display-3/#box-generation</a> より引用)</p> +</blockquote> + +<p><code>display</code> のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。</p> + +<p>以下の例では、フレックスコンテナーに３つの子要素があります。そのうちの１にはさらに２つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。</p> + +<p>ここで <code>display: contents</code> をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、２つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。<code>display: contents</code> を削除してみると元に戻ることを確認できます。</p> + +<p>レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。</p> + +<div class="warning"> +<p><strong>警告</strong>: <code>display: contents</code> を利用すると、要素がアクセシビリティツリーからも削除されます。 – 読み上げソフトは中身を見ず、 <code>display: none</code> を使用したのと同様になります。 <code>contents</code> は表示のためだけのものであり、コンテンツや要素ではありません。</p> +</div> + +<p>また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において <code>display: contents</code> を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}</p> + +<p><code>display:contents</code> のブラウザー対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに <code>display: contents</code> をサポートしており、 Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。</p> 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 new file mode 100644 index 0000000000..4c3c468afc --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -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 +--- +<p>{{CSSRef}}</p> + +<p class="summary">このガイドでは、フレックスボックスの一般的な使用例を紹介します。 — 他のレイアウト方法よりも適した使い方です。</p> + +<h2 id="Why_choose_flexbox" name="Why_choose_flexbox">なぜフレックスボックスを選ぶのか？</h2> + +<p>ブラウザーが完全対応しているならば、アイテムの集まりをある方向へ並べる用途にはフレックスボックスが適しています。アイテムを並べる際には、コンテナの内部でのアイテムの寸法や、アイテム同士の余白を調節したくなると思います。フレックスボックスはそのような用途のために設計されています。フレックスボックスと CSS グリッドレイアウトとの違いについては <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">フレックスボックスと他のレイアウト方法の関係</a> をご覧ください。そこでは、フレックスボックスが CSS レイアウトの全体像にどのように適合しているのかを説明しています。</p> + +<p>現状では、グリッドレイアウトのほうが適しているけれどもそれを使えない、という場面でもフレックスボックスはよく使われます。また、アイテムを整列する手段としても使われます。これは、Box Alignment がブロック要素のレイアウト方法として実装されれば解決するでしょう。このガイドでは、現状での典型的なフレックスボックスの使用例を紹介します。</p> + +<h2 id="Navigation" name="Navigation">ナビゲーション</h2> + +<p>ナビゲーションのよくあるパターンとして、水平な棒状にリストを表示するというものがあります。このパターンは見た目とは裏腹に、フレックスボックスの登場以前は実現が難しいものでした。フレックスボックスならばとても簡単であり、うってつけの出番だと言えます。</p> + +<p>アイテムを水平に表示する際に、空白が必要になる場合があります。その空白をどうするか。2 つの選択肢があります。アイテムの外側に置く場合は、アイテム同士の間やアイテムの周囲に空白を配置することになります。アイテムの内側に入れる場合は、アイテムが空白を受け入れてサイズが広がるようにする方法が必要です。</p> + +<h3 id="Space_distributed_outside_the_items" name="Space_distributed_outside_the_items">空白を外側に配置</h3> + +<p>アイテム間や周囲に空白を置くには、フレックスボックスの整列系のプロパティと {{cssxref("justify-content")}} プロパティを使います。このプロパティの詳細については <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">フレックスコンテナにおけるアイテムの位置合わせ</a> をご覧ください。そこでは、主軸 (横軸) でのアイテムの整列について説明しています。</p> + +<p>下記のライブサンプルでは、アイテムをそれぞれ本来のサイズで表示しています。また、<code>justify-content: space-between</code> によって、同じ幅の空白をアイテム同士の間に配置しています。値に <code>space-around</code> や、ブラウザーが対応している場合は <code>space-evenly</code> を指定することで、空白の配置方法を変えることができます。<code>flex-start</code> で空白をアイテム群の後ろに配置し、<code>flex-end</code> で空白をアイテム群の前に配置し、<code>center</code> でアイテム群をナビゲーションの中央に配置することもできます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p> + +<h3 id="Space_distributed_within_the_items" name="Space_distributed_within_the_items">空白を内側に配置</h3> + +<p>ナビゲーションでの別のパターンは、空白をアイテム同士の間ではなく、アイテム自身の内部に配置することです。この場合は、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Flex アイテムを主軸に沿わせる時の制御割合</a> に書かれているように、{{cssxref("flex")}} プロパティを使うことで、アイテムを互いの比率を保ったまま伸縮できます。</p> + +<p>ナビゲーションのアイテムの幅を同じにしたいなら、<code>flex: auto</code> を指定します。これは <code>flex: 1 1 auto</code> の短縮版です。すべてのアイテムは自動の flex-basis をもとに伸縮します。つまり、他よりも中身が多いアイテムは、占める領域も他より多くなります。</p> + +<p>下記のライブサンプルの <code>flex: auto</code> を <code>flex: 1</code> に変えてみてください。これは <code>flex: 1 1 0</code> の短縮版で、すべてのアイテムの幅が同じになります。なぜなら、flex-basis が 0 となって領域が均等に配分されるからです。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p> + +<h2 id="Split_navigation" name="Split_navigation">ナビゲーションの分割</h2> + +<p>主軸 (横軸) でアイテムを整列するもうひとつの方法は、自動マージンを使うことです。これにより、一方のアイテム群を左揃えにして別のアイテム群を右揃えにする、というナビゲーションバーのデザインパターンが可能になります。</p> + +<p>下記の例では、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">主軸上での位置合わせに auto マージンを使う</a> に書かれている自動マージンの技法を使っています。アイテムは <code>flex-start</code> によって主軸上に揃えられます。これはフレックスボックスの既定の挙動です。そして、左マージンに auto を指定することで、そのアイテムだけは右に揃えられます。分割される地点を変えるには、CSSクラス "push-right" を別のアイテムに移してください。</p> + +<p>下記の例では、フレックスアイテムにマージンを指定して、アイテム間の空白を作っています。また、フレックスコンテナにネガティブマージンを指定して、コンテナの幅いっぱいにアイテムを表示するようにしています。Box Alignment の仕様にある <code>gap</code> プロパティがフレックスボックスに実装されるまでは、このようにマージンを使う必要があります。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p> + +<h2 id="Center_item" name="Center_item">アイテムの中央揃え</h2> + +<p>フレックスボックスの登場以前、開発者たちは「Webデザインで最も難しいのは垂直方向の中央揃えだ」と冗談を言っていました。今では、下記のライブサンプルのとおり、フレックスボックスの整列系のプロパティで簡単にできます。</p> + +<p>下記のコード内の <code>center</code> の代わりに、先頭に揃える <code>flex-start</code> や末尾に揃える <code>flex-end</code> を指定して、整列の挙動を試してみてください。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p> + +<p>将来、Box Alignment の各プロパティがブロック要素のレイアウト方法として完全に実装されれば、単一のアイテムの中央揃えのためにフレックスコンテナを作る必要はなくなります。しかし現状では、1 つのものを別のものの中で正確に中央に配置したければ、フレックスボックスを使うことになります。上記の例のように、コンテナをフレックスコンテナとして扱ってフレックスコンテナに <code>align-items</code> を指定するか、フレックスアイテム自身に <code>align-self</code> を指定してください。</p> + +<h2 id="Card_layout_pushing_footer_down" name="Card_layout_pushing_footer_down">フッターが下端に張り付くカード</h2> + +<p>フレックスボックスや CSS グリッドを使ってコンテナ内のカード状の部品を並べて配置する場合、それらの制御はコンテナの直下の要素であるカード自身にしか及びません。どういうことかと言うと、各カードの中身の量が異なる場合、カードはグリッドエリアやフレックスコンテナの高さに引き伸ばされます。そして、カードの内部では通常のブロックレイアウトが用いられます。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまいます。</p> + +<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> + +<p>フレックスボックスはこれを解決できます。カード自身もフレックスコンテナにして、{{cssxref("flex-direction")}}<code>: column</code> を指定します。そしてカードの本文エリアに <code>flex: 1</code> を指定します。これは <code>flex: 1 1 0</code> の短縮版です。アイテムは <code>0</code> の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文エリアだけの場合、本文エリアはフレックスコンテナ内の空白をすべて取り込み、フッターを下端に張り付かせます。ライブサンプルから <code>flex</code> プロパティを削除すると、フッターが本文の真下に移動するのを確認できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p> + +<h2 id="Media_objects" name="Media_objects">メディアオブジェクト</h2> + +<p>メディアオブジェクトはWebデザインの一般的なパターンです。このパターンは画像などを左側に持ち、文章をもう右側に持ちます。理想的には、メディアオブジェクトを反転させて画像を左から右へ移すことができるようにすべきでしょう。</p> + +<p>このようなパターンはどこでも見かけます。コメント欄や、画像とその説明を表示する場合などです。フレックスボックスならば、メディアオブジェクトの画像エリアには画像の寸法そのままの領域を確保させて、余った領域はすべて文章エリアに使わせるという柔軟な指定ができます。</p> + +<p>下記のライブサンプルはメディアオブジェクトの例です。整列系のプロパティを使ってアイテムを交差軸 (縦軸) の <code>flex-start</code> に揃えて、<code>.content</code> を指定したフレックスアイテムに <code>flex: 1</code> を指定しています。先述のカード内の縦方向の配置と同じく、<code>flex: 1</code> はその要素を引き伸ばせることを意味します。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p> + +<p>下記のような、メディアオブジェクトの実用でよくある場面を、上記のライブサンプルで試してみたくなりませんか？</p> + +<p>画像が大きくなりすぎるのを防ぐには、{{cssxref("max-width")}} を画像に指定します。画像エリアのフレックスボックスの指定は初期値のままなので、縮むことはできますが伸びることはできません。また、初期値では <code>flex-basis</code> は auto なので、画像の {{cssxref("width")}} や max-width が <code>flex-basis</code> となります。</p> + +<pre class="brush: css">.image img { + max-width: 100px; +} +</pre> + +<p>両方のエリアの比率を維持したまま伸縮させることもできます。両者に <code>flex: 1</code> を指定すると、0 の {{cssxref("flex-basis")}} をもとに伸縮することになります。つまり両者の幅は同じになります。両者の比率を中身の量で決めるために <code>flex: auto</code> を指定することもできます。その場合は、中身のサイズに応じて、または画像の width ようにフレックスアイテムに直接適用されるサイズに応じて伸縮します。</p> + +<pre class="brush: css">.media .content { + flex: 1; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<p>両者に別々の {{cssxref("flex-grow")}} の比率を指定することもできます。例えば画像エリアには <code>flex: 1</code>、文章エリアには <code>flex: 3</code> というように。これは、両者に <code>0</code> の <code>flex-basis</code> が適用されますが、指定された <code>flex-grow</code> に従って別々の比率で領域が確保されることを意味します。このように使用される flex プロパティについては、<a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Flex アイテムを主軸に沿わせる時の制御割合</a> で詳しく説明されています。</p> + +<pre class="brush: css">.media .content { + flex: 3; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<h3 id="Flipping_the_media_object" name="Flipping_the_media_object">メディアオブジェクトを反転させる</h3> + +<p>画像が右で文章が左になるようにメディアオブジェクトの表示を切り替えるには、<code>flex-direction</code> プロパティに <code>row-reverse</code> を指定します。下記のライブサンプルでは、<code>.flipped</code> のクラスを <code>.media</code> の隣に追加することで実現しています。HTML からそのクラスを削除すれば、どのように表示が変わるのかが分かるでしょう。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p> + +<h2 id="Form_controls" name="Form_controls">フォームコントロール</h2> + +<p>フレックスボックスはフォームコントロールのスタイル指定に関しては特に便利です。フォームにはマークアップと小さな要素がたくさんあり、それらを整列させたいと考えるはずです。よくあるパターンは {{htmlelement("input")}} 要素と {{htmlelement("button")}} の組み合わせでしょう。検索フォームや、単に訪問者にメールアドレスを入力してもらう用途などで使われます。</p> + +<p>フレックスボックスならばこのようなレイアウトを簡単に実現できます。下記の例では、枠線と <code>display: flex</code> を指定したラッパーの中に <code><button></code> と <code><input></code> フィールドを入れています。<code><input></code> フィールドを引き伸ばすために flex プロパティを使っています。ただし、ボタンは引き伸ばされません。つまり、確保できる領域の変化に応じて伸縮する入力欄を備えたフォーム部品を実現できます。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p> + +<p>ボタンを右側に置いたのと同じように、ラベルやアイコンを左側に置くことも簡単にできます。今回はラベルを置きました。背景色以外は、何もレイアウトを変更していません。伸縮する入力欄は少し狭くなるものの、2 つのアイテムが取った残りの領域をすべて使うことになります。</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p> + +<p>このようなパターンのおかげで、デザインに合わせたフォーム要素のライブラリを簡単に作れます。要素の追加にも簡単に対応できます。伸縮するアイテムとしないアイテムを組み合わせる用途では、フレックスボックスの柔軟性の恩恵を存分に受けることができるのです。</p> + +<h2 id="Conclusion" name="Conclusion">終わりに</h2> + +<p>上に挙げたパターンを見て回るうちに、フレックスボックスの最適な利用場面を考え始めたことと思います。いろいろな選択肢があることでしょう。伸縮するアイテムとしないアイテムを組み合わせたり、フレックスアイテムの中身のサイズをフレックスアイテム自身に反映させたり、比率に沿ってフレックスボックスの領域を分け合ったり。すべてはあなた次第です。</p> + +<p>コンテンツの最適な表現方法を思い描いてみてください。そしてその実現にあたって、フレックスボックスや他のレイアウト方法をどのように利用できるのかを調べてみてください。</p> diff --git a/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html new file mode 100644 index 0000000000..83ec871366 --- /dev/null +++ b/files/ja/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html @@ -0,0 +1,190 @@ +--- +title: Web アプリケーションのレイアウトに flexbox を使用する +slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +tags: + - Advanced + - CSS + - CSS Flexible Boxes + - Example + - Guide + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a>、JavaScript による細工をなくして、数行の <a href="/ja/docs/Web/CSS">CSS</a> だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:</p> + +<ul> + <li>ページの中央に要素を置きたい場合。</li> + <li>コンテナを垂直方向へ次々に並べて配置したい場合。</li> + <li>スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。</li> +</ul> + +<p>この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで <em>flexbox</em> を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の使用に関する、より一般的なガイド</a>をご覧ください。</p> + +<h2 id="Basics" name="Basics">基本</h2> + +<p>任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに <code>flex</code> を、また {{cssxref("flex-flow")}} に <code>row</code> (要素を水平に並べたい場合) または <code>column</code> (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 <code>wrap</code> も指定します。</p> + +<p>そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:</p> + +<ul> + <li>ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、<code>flex: none</code> を使用します。この値は <code>0 0 auto</code> に展開されます。</li> + <li>要素のサイズを明示したい場合は、<code>flex: 0 0 <em>size</em></code> を使用します。例: <code>flex 0 0 60px</code></li> + <li>使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、<code>flex: auto</code> を使用します。この値は <code>1 1 auto</code> に展開されます。</li> +</ul> + +<p>もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。</p> + +<h2 id="Centering_an_element_inside_a_page" name="Centering_an_element_inside_a_page">ページ内の中央に要素を配置する</h2> + +<p>このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。</p> + +<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}</p> + +<h2 id="Flowing_a_set_of_containers_vertically" name="Flowing_a_set_of_containers_vertically">複数のコンテナを垂直方向に並べる</h2> + +<p>ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを <code>auto</code> に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを <code>none</code> にすることで実現できます。</p> + +<h3 id="CSS_Content_2" name="CSS_Content_2">CSS コンテンツ</h3> + +<pre class="brush: css;highlight:[8,14]">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="HTML_Content_2" name="HTML_Content_2">HTML コンテンツ</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Increase container size</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> +</div> +</pre> + +<h3 id="Javascript_Content" name="Javascript_Content">Javascript コンテンツ</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="Result_2" name="Result_2">結果</h3> + +<p>{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}</p> + +<p>この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。</p> + +<h2 id="Creating_a_collapsing_horizontal_container" name="Creating_a_collapsing_horizontal_container">折り返される水平方向のコンテナを作成する</h2> + +<p>スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 <code>wrap</code> を追加すると実現できます。</p> + +<h3 id="CSS_Content_3" name="CSS_Content_3">CSS コンテンツ</h3> + +<pre class="brush: css;highlight:[4]">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="HTML_Content_3" name="HTML_Content_3">HTML コンテンツ</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Element 1</div> + <div class="fixed-size">Element 2</div> + <div class="fixed-size">Element 3</div> +</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> +</pre> + +<h3 id="Javascript_Content_2" name="Javascript_Content_2">Javascript コンテンツ</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="Result_3" name="Result_3">結果</h3> + +<p>{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li> +</ul> |