From 3ab06a7be53ae18ce5000a9ac9ebe2b335bb167a Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 12:26:21 +0900 Subject: [PATCH 01/96] =?UTF-8?q?2024/11/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 206 ++++++++++++++---- 1 file changed, 163 insertions(+), 43 deletions(-) diff --git a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md index 8e0dc96f774f75..0dab4428b635fc 100644 --- a/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md +++ b/files/ja/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -2,38 +2,28 @@ title: フレックスボックスと他のレイアウト方法の関係 slug: Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods l10n: - sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d + sourceCommit: 8a7e911652fcb4a61cc95f458d53f39ad08c0946 --- {{CSSRef}} -この記事ではフレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。 - -> [!NOTE] -> CSS のバージョン 1 と 2 は、すべての CSS を長大な一つの文書に定義している単一の仕様でした。 CSS が機能の豊富な言語になるに従って、 CSS の各機能がそれぞれ異なるスピードで変化するため、一つの巨大な仕様をメンテナンスしていくことが問題になってきました。そこで CSS はモジュール化され、現在では個別の CSS 仕様が異なるモジュールとして CSS 全体を構成しています。これらのモジュールは互いに関係し合っていますが、それぞれ異なる開発ステージにあります。 +この記事では、フレックスボックスが他の CSS モジュールとどのように組み合わせられるかを見ていきます。フレックスボックスについて学びたいときに気をつけておくべき仕様を明らかにし、またなぜフレックスボックスが他のモジュールと異なったものであるかという点についても明確にします。 ## ボックス配置モジュール -多くの人にとってフレックスボックスに着目し始めた最初の理由は、フレックスコンテナー内でフレックスアイテムを適正に配置する機能があるためです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。 - -これらのプロパティは、フレックスボックスの仕様として生まれましたが、現在では [Box Alignment 仕様書](https://www.w3.org/TR/css-align-3/)の一部でもあります。この仕様はフレックスボックスに限らない、すべてのレイアウトにおいて配置がどのように動作するかについての詳細を記しています。ボックス配置は位置合わせや端揃えについて扱い、また軸に沿った余白の分配についても扱っています。 - -ボックス配置に含まれているプロパティがフレックスボックス仕様においても詳細に記述され残っているのは、すべてのレイアウトタイプにおける配置方法の詳細を記さなければいけないボックス配置によって、フレックスボックス仕様の完成が遅れることのないようにするためです。フレックスボックス仕様には、将来 Box Alignment Level 3 が完成した際には、フレックスボックス仕様の定義はボックス配置の定義に取って代わられるというメモがあります。 - -> "メモ: 配置のためのプロパティは CSS Box Alignment [CSS-ALIGN-3] 中で定義されていますが、仕様策定を遅らせうるような依存関係を持たせないために、Flexible Box Layout にも同様のプロパティの定義が重複して掲載されています。これらのプロパティは CSS Box Alignment Level 3 が完成し、他のレイアウトモードへの効果を定義するまでは、flex レイアウトのみに適用されます。さらに、Box Alignment モジュールにて定義されるすべての新しい値は Flexible Box Layout にも適用されます。言い換えると、Box Alignment モジュールの完成後には、Box Alignment モジュールでの定義がここでの定義に取って代わるということです。" -> (訳注: [https://www.w3.org/TR/css-flexbox-1/#alignment](https://www.w3.org/TR/css-flexbox-1/#alignment) より引用) +多くの人がフレックスボックスを最初に注目するのは、フレックスコンテナーの中にフレックスアイテムを適切に配置したいときです。フレックスボックスはアイテムの交差軸上での位置合わせを行ったり、主軸上での端揃えを行うためのプロパティを提供しています。 -このガイドの後の記事「[フレックスコンテナー内のアイテムの配置](/ja/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)」では、フレックスアイテムに適用できるボックス配置プロパティについて詳細に見ていきます。 +フレックスボックスは、元々自分自身で[フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュールで定義していましたが、他のレイアウトメソッドに共通するプロパティや数値は [CSS ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)モジュールで定義しています。このモジュールは、フレックスボックスだけでなく、すべてのレイアウト方式で配置、位置揃え、隙間、溝がどのように動作するのかを詳しく説明しています。ある機能が両方の仕様で定義されている場合、ボックス配置モジュールがフレックスボックスレイアウトモジュールより優先されることに注意してください。 ## 書字方向 -「[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)」の記事で、フレックスボックスが**書字方向対応**であることに触れました。書字方向については CSS の [Writing Modes 仕様書](https://www.w3.org/TR/css-writing-modes-3/)で詳細に記されており、国によって異なる様々な書字方向にどのように CSS が対応しているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。**ブロック**方向と**インライン**方向について理解することが、新しいレイアウト方法の鍵となります。 +「[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)」の記事で、フレックスボックスが**書字方向対応**であることに触れました。書字方向については [CSS 書字方向](/ja/docs/Web/CSS/CSS_writing_modes)モジュールで詳細に記されており、国によって異なる書字方向にどのように CSS が対応しているか明らかにしています。書字方向によって文書中にレイアウトされるブロックの方向が変わることが、フレックスレイアウトにどのような影響を及ぼすかについて気を配らなければなりません。**ブロック**方向と**インライン**方向について理解することが、新しいレイアウト方法の鍵となります。 -コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。各書字方向についての詳細な説明と、他言語のコンテンツのためあるいはクリエイティブな理由のために書字方向を使う方法については、[この記事](https://24ways.org/2016/css-writing-modes/)を参照してください。 +コンテンツが異なる書字方向の言語で書かれてるからという理由以外でも、文書の書字方向を変更したい場合があると知っておくことも大切です。 CSS の書字方向モジュールは、テキストを横書き、左書き、右書き、左書き、縦書き、上から下に書く方法を定義します。これは国際化や翻訳のために重要ですが、これらの機能はクリエイティブなデザインにも使用することができます。 ### 書字方向 -Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。 +書字方向仕様では {{cssxref("writing-mode")}} プロパティのために以下の値を定義しており、特定の書字方向においてコンテンツがブロック内にレイアウトされる方向と、ブロックがページ内で配置される方向が適合するよう変更するために使えます。フレックスレイアウトに何が起こるかを理解するために、以下の例を変更してみてください。 - `horizontal-tb` - `vertical-rl` @@ -41,70 +31,200 @@ Writing mode 仕様では {{cssxref("writing-mode")}} プロパティのため - `sideways-rl` - `sideways-lr` -{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} +```html live-sample___writing-modes +
+
One
+
Two
+
Three
+
+``` -`sideways-rl` と `sideways-lr` の対応は現時点では Firefox のみということに注意してください。また `writing-mode` とフレックスボックスに関しての既知の問題がいくつかあります。ブラウザーの対応状況については [MDN の書字方向のドキュメント](/ja/docs/Web/CSS/writing-mode)に情報があります。しかし、もしレイアウトのために書字方向を設定する予定であれば、それがどのような結果になるか注意深くテストすることが推奨されます。比較的簡単に、文字が読みにくくなってしまうからです。 +```css live-sample___writing-modes +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} -CSS の `writing-mode` プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で `html` 要素に `dir` 属性と `lang` 属性を指定することで、文書の言語とテキスト方向を指定します。それによって CSS が読み込まれなかったとしても文書を正しく表示することができます。 +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; + writing-mode: horizontal-tb; +} +``` -## フレックスボックスと他のレイアウト方法 +{{EmbedLiveSample("writing-modes")}} + +`sideways-rl` と `sideways-lr` の対応は現時点では Firefox のみです。 + +CSS の `writing-mode` プロパティを文書全体の書字方向を変更するために使うことはあまりないでしょう。通常は HTML 上で [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) 属性と [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性を {{htmlelement("html")}} 要素に指定することで、文書の言語とテキスト方向を指定します。それによって CSS が読み込まれなかったとしても文書を正しく表示することができます。 -フレックスボックス仕様には、他のレイアウト方法を使用していて、それからフレックスアイテムになった場合に[起こることの定義](https://www.w3.org/TR/css-flexbox-1/#flex-containers)が含まれています。例えば `float` 設定されている要素がありその親要素がフレックスコンテナーとなった場合について、またあるいは、フレックスコンテナーがレイアウトの一部としてどのように振る舞うかについて記載されています。 +## フレックスボックスと他のレイアウト方法 -`display: flex` に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。 +一部のプロパティは、コンテンツが標準ブロックレイアウトシステムを使用してレイアウトされることを想定して設計されており、フレックスレイアウトのコンテキストでは適用されません。 `display: flex` に設定された要素は、他の包含ブロックを構成するブロックレベルコンテナーとほとんど同じように振る舞います。浮動要素が侵入せず、コンテナーのマージンは相殺されません。 フレックスアイテムについては、ある要素は浮動 (`float`) や解除 (`clear`) が設定されていて、その上で親要素に `display: flex` が設定されたためにフレックスアイテムとなった場合、浮動と解除のいずれも無効になり、浮動が配置される通常のフローからは外れます。`inline-block` やテーブルレイアウトでの位置合わせのために {{cssxref("vertical-align")}} プロパティを使用している場合、このプロパティは作用しなくなります。代わりにフレックスボックスの配置用プロパティを使うことができます。 次の例では、子要素は浮動設定されており、コンテナーには `display: flex` が設定されています。`display: flex` を削除すると、解除が適用されていないため `.box` が折りたたまれます。再度 `display: flex` を適用すると折りたたみは起こりません。これは子要素がフレックスアイテムに変換されたために、浮動が適用されなくなったためです。 -{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}} +```html live-sample___floats +
+
One
+
Two
+
Three
+
+``` + +```css live-sample___floats +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + float: left; +} +``` + +{{EmbedLiveSample("floats")}} ## フレックスボックスとグリッドレイアウト -[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)とフレックスボックスは、ほかのレイアウト方法を上書きするという観点ではおおむね同じように振る舞います。しかし、フレックスボックスの方が古いブラウザーでも比較的サポートされているため、フレックスボックスをグリッドレイアウトのフォールバックとして使いたいときがあるかもしれません。このやり方はうまく動きます。フレックスアイテムがグリッドアイテムになるとき、そのアイテムに設定されている `flex` プロパティは無視されるようになります。 - -ボックス配置プロパティは、両レイアウト方法をまたいで使用することができ、グリッドレイアウトのフォールバックとしてフレックスボックスを使う場合にもうまくいきます。 +[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_grid_layout)とフレックスボックスは多くのプロパティと値を共有しています。異なるプロパティの場合、フレックスアイテムがグリッドアイテムになると、子要素に割り当てるフレックス値（`flex-end` など）は無視されます。上述のように、両方のレイアウトメソッドで動作するボックス配置モジュールで定義する値は、フレックスボックスのみで定義する値よりも優先されます。 ### フレックスとグリッドの違いは？ フレックスボックスと CSS グリッドレイアウトの違いは何か？なぜところどころ同じことをしているように見える 2 つの仕様がわざわざあるのか？というのはよくある疑問です。 -この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、基本コンセプトの記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーとなります。余白の分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。 - -{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}} +この疑問に対する最も素直な答えは、仕様自体で定義されています。一方のフレックスボックスは一次元のレイアウト方法で、他方のグリッドレイアウトは二次元のレイアウト方法だということです。以下の例はフレックスレイアウトを使っており、[基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)の記事で述べたようにフレックスアイテムは折り返すことができますが、折り返された場合にはそれぞれの行が別のフレックスコンテナーであるかのように動作します。余白の分配の際にほかの行のアイテム配置については考慮されず、ほかの行との間でのアイテムの位置を揃えようともしません。 + +```html live-sample___flex-layout +
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
+``` + +```css live-sample___flex-layout +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; + padding: 1em; +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + padding: 1em; + flex: 1 1 200px; +} +``` + +{{EmbedLiveSample("flex-layout", "", "300px")}} 同様のレイアウトをグリッドで作成すると、行と列の両方を制御することができます。 -{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}} +```html live-sample___grid-layout +
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
+``` + +```css live-sample___grid-layout +.box { + border: 2px dotted rgb(96 139 168); + padding: 1em; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, auto)); +} + +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 1em; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("grid-layout", "", "300px")}} これらの例はフレックスボックスとグリッドの主要な差異を示しています。グリッドレイアウトではサイズの指定の大部分はコンテナーに対して行い、トラックを組み上げてそこにアイテムを配置していきます。フレックスボックスではフレックスコンテナーを作りその方向を決めますが、アイテムのサイズに関する制御はアイテム自体に行っていくことになります。 -場合によってはいずれのレイアウト方法でも適切に使えるかもしれませんが、この両方を自信を持って使えるようになるにつれて、それぞれのレイアウト方法が得意とするレイアウトの要求が異なっていることがわかってくるでしょう。そして最終的には両方のレイアウト方法を使うことになるでしょう。ひとつの正解や不正解があることはほとんどありません。 +用途によっては、どちらのレイアウト方法も使用することができます。両方を使いこなせるようになると、どのレイアウトニーズにどの方法が適しているかがわかり、最終的には両方の方法を CSS で使うことになるでしょう。一つの政界や不正解があることはほとんどありません。 + +一般的ななルールとして、フレックスアイテムに幅を設定して、折り返されたフレックスコンテナーの行内のアイテムを、上の行のアイテムの位置と揃えようとしているときには、二次元のグリッドレイアウトを採用すべきでしょう。 -基本的なルールとして、折り返しされたフレックスコンテナーの一行の中のアイテムを、上の行のアイテムの位置と揃えるためにフレックスアイテムに幅を設定しようとするときには、二次元レイアウトがどうしても欲しくなることがあります。そのような場合には CSS グリッドレイアウトを使ったほうがよいでしょう。小さなコンポーネントにはフレックスボックスを使い、大きいコンポーネントにはグリッドレイアウトを使うべきというのは事実ではありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。 +「小さなコンポーネントにはフレックスボックスを使い、大きなコンポーネントにはグリッドレイアウトを使うべき」というようなルールはありません。とても小さいコンポーネントであっても二次元になることもあれば、大きなレイアウトを一次元のレイアウトで表現することが適している場合もあります。今はレイアウト方法を選べるようになったので、その利点を生かすためにいろいろと試してみてください。 グリッドとフレックスボックスのさらに詳しい比較については「[グリッドレイアウトと他のレイアウト方法との関係](/ja/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods)」の記事を参照してください。この記事ではグリッドレイアウトがフレックスレイアウトと異なっている多くの点について詳述し、またグリッドレイアウトの持つグリッド上のアイテムのレイヤー機能などの追加機能について実例を示しています。また、どちらのレイアウト方法を選ぶべきかを決める手助けにもなるでしょう。 ## フレックスボックスと display: contents -{{cssxref("display")}} プロパティの値 `contents` は、仕様書の中で以下のように述べられている新しい値です。 +{{cssxref("display")}} プロパティの値 `contents` は、仕様書の中で以下のように説明されています。 > 「要素自体はボックスを生成しませんが、その子要素や擬似要素については通常と変わらずボックスを生成します。ボックス生成とレイアウトにおいては、この要素はその子要素や擬似要素によって置き換えられたように扱わなければなりません」 > (訳注: [https://www.w3.org/TR/css-display-3/#box-generation](https://www.w3.org/TR/css-display-3/#box-generation) より引用) `display` のこの値はボックス生成を制御し、ページ上に表示されスタイリングすることができるボックスをその要素が生成すべきか、または通常生成されるボックスは削除して子要素を親要素が元々加わっていたレイアウト方法に引き上げて参加させるべきかを制御します。これについては例を見たほうがわかりやすいでしょう。 -以下の例では、フレックスコンテナーに 3 つの子要素があります。そのうちの 1 つにはさらに 2 つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。 +以下の例では、フレックスコンテナーとその中に 3 つの子要素があります。そのうちの 1 つにはさらに 2 つのネストした子要素があります。ネストした子要素は通常、フレックスレイアウトの構成に含まれません。フレックスレイアウトはフレックスコンテナーの直下の子要素のみに適用されます。 ここで `display: contents` をネストした要素のラッパーに追加することで、このラッパー要素がレイアウトから消え、2 つのネストした子要素がフレックスコンテナーの直下の要素であった時のようにレイアウトされます。`display: contents` を削除してみると元に戻ることを確認できます。 -レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されないことが以下の例でわかります。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイリングまでは適用されません。 +レイアウト上からボックスが削除されるだけで、レイアウト以外の観点ではこのネストした子要素が直下の子要素にならない点には注意が必要です。例では直下の子セレクターを使ってフレックスアイテムに背景色とボーダーを設定しているのですが、ネストした子要素には適用されません。フレックスアイテムとしてレイアウトはされますが、直下の子要素ではないため他のスタイル設定までは適用されません。 + +ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。 + +```html live-sample___display-contents +
+
One
+
Two
+
+
サブアイテム 1
+
サブアイテム 2
+
+
+``` + +```css live-sample___display-contents +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 1em; + background-color: rgb(96 139 168 / 0.2); +} + +.box { + border: 2px dotted rgb(96 139 168); + padding: 1em; + display: flex; +} + +.nested { + background-color: orange; + display: contents; +} +``` + +{{EmbedLiveSample("display-contents")}} > [!WARNING] -> 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) を参照してください。 - -また、ボックスを削除した場合には、それを例えば背景色をネストした子要素に適用するために使用することはできません。今回の例において `display: contents` を削除すると、削除されていた直下の子要素がオレンジの背景色になっていることがわかります。この背景色はボックスが消えると同時に消えます。 - -{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}} - -`display: contents` のブラウザーの対応は限られていますが、このデモを動かすために必要です。 Firefox はすでに `display: contents` に対応しており、Chrome も実装しています。ブラウザーの対応が進めば、意味上の理由でマークアップが必要だが生成されてしまうボックスを表示したくないという場合において、この機能は大変有用なものになるでしょう。 +> 現在のほとんどのブラウザーの実装では、`display: contents` を持つ要素をアクセシビリティツリーから削除します（ただし、子孫は残ります）。これにより、要素自体がスクリーンリーダー技術でアナウンスされなくなります。これは仕様書によれば正しくない動作です。 [`display: contents`](/ja/docs/Web/CSS/display#display_contents) および　[`display: contents` considered harmful](https://ericwbailey.design/published/display-contents-considered-harmful/)　を参照してください。 From cdca996931bcd99dcb862784fbb40fd00c2807b0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 13:44:09 +0900 Subject: [PATCH 02/96] =?UTF-8?q?2024/10/30=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 499 +++++++++++++++--- 1 file changed, 432 insertions(+), 67 deletions(-) diff --git a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index d44c801ff558c7..c2fd9c6405c656 100644 --- a/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/ja/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -2,38 +2,63 @@ title: フレックスコンテナー内のアイテムの配置 slug: Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container l10n: - sourceCommit: 3c7e928f332191b153c40a6ade88fb5815c92b99 + sourceCommit: f11e9200b6f9d5c191051eb7ccbe7ebd44966e43 --- {{CSSRef}} -フレックスボックスがウェブ開発者の関心を急速に集めた理由の一つに、ウェブコンテンツで適切な配置ができる初めての機能であってことが挙げられます。正しい垂直方向の配置が可能になったことで、ついにボックスの中央寄せを簡単にできるようになりました。このガイドでは、フレックスボックスにおいて配置や行端揃えのプロパティがどのように働くかを詳しくみていきます。 +フレックスボックスが有用な理由の 1 つは、要素を垂直方向に中央揃えする手軽な方法を提供しているなど、適切な配置が可能になることです。このガイドでは、フレックスボックスの配置と位置揃えのプロパティがどのように動作するのかを、徹底的に見ていきます。 -ボックスを中央寄せするには、`align-items` プロパティを使って交差軸上（今回の場合は縦軸上）の配置をし、`justify-content` プロパティで主軸上（今回の場合は横軸上）の配置をします。 +## フレックスボックスでの配置の使用 -![内部に中央寄せされたボックスを持つコンテナー要素](align1.png) +フレックスボックスには配置と余白を制御するプロパティがいくつか提供されており、 `align-items` と `justify-content` は要素を中央揃えにするための基本的なプロパティです。要素を中央に配置するには、 {{cssxref("align-items")}} プロパティを使用してアイテムを{{glossary("cross axis","交差軸")}}（この場合は縦方向に動作する[ブロック軸](/ja/docs/Glossary/Flow_relative_values)）に配置します。 {{cssxref("justify-content")}} を使用して、主軸（この場合は水平方向に動作するインライン軸）に配置します。 -以下の例のコードをみてください。コンテナーや子要素のサイズを変更しても、子要素は常に中央寄せされます。 +![内部に中央寄せされたボックスを持つコンテナー要素](align1.png) -{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}} +下記のコード例で、コンテナー内または内側の要素のサイズを変更してみてください。内側の要素は常に中央に配置されます。 + +```html live-sample___intro +
+
+
+``` + +```css live-sample___intro +.box { + display: flex; + align-items: center; + justify-content: center; + border: 2px dotted rgb(96 139 168); +} + +.box div { + width: 100px; + height: 100px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("intro")}} ## 配置を制御するプロパティ 本ガイドで扱うプロパティは以下のとおりです。 -- {{cssxref("justify-content")}} — 全アイテムの主軸上の配置を制御します。 -- {{cssxref("align-items")}} — 全アイテムの交差軸上の配置を制御します。 -- {{cssxref("align-self")}} — 個別のフレックスアイテムごとに交差軸上の配置を制御します。 -- {{cssxref("align-content")}} — 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御します。 -- {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}} — フレックスアイテム間にすき間または溝を生成するために使用します。 +- {{cssxref("justify-content")}}: 全アイテムの主軸上の配置を制御します。 +- {{cssxref("align-items")}}: 全アイテムの交差軸上の配置を制御します。 +- {{cssxref("align-self")}}: 個別のフレックスアイテムごとに交差軸上の配置を制御します。 +- {{cssxref("align-content")}}: 仕様では「フレックス行のパッキング (packing flex lines)」と説明されている。交差軸上でのフレックス行間の余白を制御します。 +- {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}}: フレックスアイテム間にすき間または溝を生成するために使用します。 また、auto マージンがフレックスボックスでの配置にどのように使えるかについても触れます。 -## 交差軸 +## 交差軸上のアイテムの配置 -`align-items` プロパティと `align-self` プロパティは、交差軸 (cross axis) 上のフレックスアイテムの位置を制御します。 `flex-direction` が `row` のときは列を下り、 `flex-direction` が `column` のときは行方向です。 +フレックスコンテナー内で設定する {{cssxref("align-items")}} プロパティと、フレックスアイテムで設定する {{cssxref("align-self")}} プロパティは、フレックスアイテムの交差軸上の配置を制御します。交差軸は、 {{cssxref("flex-direction")}} が `row` の場合は列に、 `flex-direction` が `column` の場合は行に沿って流れます。 -もっとも単純なフレックスの例で、交差軸上の配置を試してみましょう。`display: flex` をコンテナーに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。このフレックスアイテムはすべて、最も高さのあるアイテムと同じ高さになるように引き伸ばされますので、最も高さのあるアイテムが交差軸のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナーの高さまでアイテムが引き伸ばされます。 +基本的なフレックスの例で、交差軸上の配置を使用してみましょう。 `display: flex` をコンテナーに設定すると、子要素はすべてフレックスアイテムになり、一行に配置されます。既定では、このフレックスアイテムはすべて、最も背の高いアイテムと同じ高さになるように引き伸ばされますので、最も背の高いアイテムが交差軸のアイテムの高さを定義することになります。フレックスコンテナーに高さが設定されている場合は、アイテム内のコンテンツの大きさにかかわらず、コンテナーの高さまで各アイテムが引き伸ばされます。 ![3 つのアイテムがあり、うち 1 つのアイテムには他よりも高くなる要因となる追加のテキストがある。](align2.png) @@ -43,94 +68,322 @@ l10n: アイテムの配置を制御するために、以下の値を使うことができます。 +- `align-items: stretch` - `align-items: flex-start` - `align-items: flex-end` +- `align-items: start` +- `align-items: end` - `align-items: center` -- `align-items: stretch` - `align-items: baseline` +- `align-items: first baseline` +- `align-items: last baseline` 以下の例では、`align-items` の値は `stretch` に設定されています。他の値についても試し、フレックスコンテナーの中でそれぞれのアイテムが互いにどのように配置されるかを確認してください。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} +```html live-sample___align-items +
+
One
+
Two
+
Three
には追加の
テキストが
あります
+
+``` + +```css live-sample___align-items +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: stretch; +} + +.box div { + width: 100px; + height: 100px; + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; +} +``` + +{{EmbedLiveSample("align-items")}} ### `align-self` で個別のアイテムを配置 -`align-items` プロパティは、すべてのアイテムの `align-self` プロパティをまとめて設定します。つまり、 `align-self` プロパティでは 1 つずつ個別のアイテムを対象として指定できます。 `align-self` プロパティには、 `align-items` プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための `auto` を使うことができます。 - -次の例では、フレックスコンテナーには `align-items: flex-start` を設定していて、これはアイテムを交差軸上の始点に揃えます。`first-child` セレクターを使って最初のアイテムを対象として、 `align-self: stretch` を設定しており、また別のアイテムを `selected` クラスで選択して `align-self: center` を設定しています。 `align-items` の値を変更したり、個別のアイテムの `align-self` の値を変更して、どのように動作するかを試してみてください。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} +`align-items` プロパティは、すべてのアイテムの `align-self` プロパティをまとめて設定します。つまり、 {{cssxref("align-self")}} プロパティでは 1 つずつ個別のアイテムを対象として指定できます。 `align-self` プロパティには、 `align-items` プロパティに使えるすべての値と、それに加えてフレックスコンテナーで定義した値にリセットするための `auto` を使うことができます。 + +次のライブサンプルでは、フレックスコンテナーに `align-items: flex-start` が設定されています。これは、アイテムがすべて交差軸の始めに配置されているという意味です。 `first-child` セレクターを使用して、最初のアイテムを `align-self: stretch` に設定します。 `selected` クラスを持つ別のアイテムには `align-self: center` を設定します。 `align-items` の値を変更するか、個々のアイテムの `align-self` の値を変更して、これがどのように動作するのか確認してみてください。 + +```html live-sample___align-self +
+
One
+
Two
+
Three
+
Four
+
+``` + +```css live-sample___align-self +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + align-items: flex-start; + height: 200px; +} +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +.box > *:first-child { + align-self: stretch; +} +.box .selected { + align-self: center; +} +``` + +{{EmbedLiveSample("align-self", "", "250px")}} ## 主軸の変更 -ここまでは、 `flex-direction` が `row` で、上から下へ書かれる言語の場合の動作を見てきました。これはつまり、主軸は横方向に行に沿ったものであり、一方で交差軸での配置はアイテムを上下に移動させるものとなります。 +ここまで、`flex-direction`が既定で`row`に設定されている場合の配置動作について見てきましたが、これは上から下へ書く言語で、横が主軸、縦が交差軸で作業している場合について見てみましょう。 ![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。垂直軸上で配置されている。](align4.png) -`flex-direction` を `column` に変更した場合、`align-items` と `align-self` はアイテムの左右方向での配置を行うようになります。 +同じ書字方向のままで、 `flex-direction` を `column` に変更すると、 `align-items` と `align-self` プロパティではアイテムを上下ではなく左右に配置します。これらのプロパティはアイテムを交差軸に沿って配置することに変わりはありませんが、交差軸はこれで水平になります！ ![3 つのアイテムがあり、1 つ目は flex-start、2 つ目は center、3 つ目は flex-end に配置されている。水平軸上で配置されている。](align5.png) 次の例では `flex-direction: column` を設定し、それ以外は先の例と全く同じフレックスコンテナーを使ってこの動作を示しています。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} - -## 交差軸上の配置 — align-content プロパティ - -ここまで、フレックスコンテナーによって定義される領域の中で、アイテム全体またはアイテム個別の配置をしてきました。折り返しのある複数行のフレックスコンテナーがある場合、 `align-content` プロパティを使えば行間でのスペース分配を制御できます。仕様では、これは「[フレックス行のパッキング (packing flex lines)](https://drafts.csswg.org/css-flexbox/#align-content-property)」として説明されています。 - -`align-content` が有効に動作するためには、アイテムを表示するのに必要な高さよりもフレックスコンテナーの方が高くする必要があります。このプロパティはすべてのアイテムを 1 つのセットとして扱い、余白の扱いと、セットに含まれるアイテムの配置について指示します。 +```html live-sample___align-self-column +
+
One
+
Two
+
Three
+
Four
+
+``` + +```css live-sample___align-self-column +.box { + border: 2px dotted rgb(96 139 168); + display: flex; + flex-direction: column; + align-items: flex-start; + width: 200px; +} +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +.box > *:first-child { + align-self: stretch; +} +.box .selected { + align-self: center; +} +``` + +{{EmbedLiveSample("align-self-column", "", "300px")}} + +## `align-content` プロパティによるコンテンツの交差軸への配置 + +これまでは、 1 行のフレックスアイテムを含む{{glossary("flex_container","フレックスコンテナー")}}の中に、アイテムや個々のアイテムを配置することを中心に説明してきました。フレックスアイテムが複数行にまたがる場合、 {{cssxref("align-content")}} プロパティを使用して行間の余白の配分を制御することができます。これは**フレックス行のパック**と呼ばれます。 + +`align-content` が有効に動作するためには、フレックスコンテナーの交差軸の寸法（この場合は高さ）が、アイテムを表示するのに必要な寸法より大きくなければなりません。これはすべてのアイテムに対して一括で動作します。 `align-content` の値は、利用できる余った空間と、その中の一連のアイテム全体の配置を決定します。 `align-content` プロパティには以下の値を設定できます。 - `align-content: flex-start` - `align-content: flex-end` +- `align-content: start` +- `align-content: end` - `align-content: center` - `align-content: space-between` - `align-content: space-around` +- `align-content: space-evenly` - `align-content: stretch` -- `align-content: space-evenly` （フレックスボックス仕様には含まれていない） +- `align-content: normal` （`stretch` として動作） +- `align-content: baseline` +- `align-content: first baseline` +- `align-content: last baseline` 以下の例では、フレックスコンテナーは 400 ピクセルの高さで、アイテムを表示するのに必要な高さよりも高くなっています。 `align-content` の値は `space-between` で、この場合は残る分配可能な余白 (available space) はフレックス行の*間に*分配され、フレックス行自体はコンテナーの交差軸上の始点と末尾に密着して配置されます。 `align-content` プロパティがどのように働くか、ほかの値を設定して確認してください。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} +```html live-sample___align-content +
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
Eight
+
+``` + +```css live-sample___align-content +.box { + width: 450px; + border: 2px dotted rgb(96 139 168); + display: flex; + flex-wrap: wrap; + height: 300px; + align-content: space-between; +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 100px; +} + +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +``` + +{{EmbedLiveSample("align-content", "", "380px")}} 列に沿った軸の時にこのプロパティの効果がどのように変わるか、 `flex-direction` を `column` に変更した場合について確認してください。変更前と同様に、すべてのアイテムを表示した上で、十分な余白が交差軸上に必要です。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} - -> **メモ:** `space-evenly` はフレックスボックス仕様書では定義されておらず、あとからボックス配置仕様書に追加されたものです。この値に対するブラウザーの対応は、フレックスボックス仕様書に定義されている他の値より遅れています。 +```html live-sample___align-content-column +
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
Eight
+
+``` + +```css live-sample___align-content-column +.box { + display: flex; + flex-wrap: wrap; + flex-direction: column; + width: 400px; + height: 300px; + align-content: space-between; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 100px; +} + +.box div { + background-color: rgb(96 139 168 / 0.2); + border: 2px solid rgb(96 139 168); + border-radius: 5px; + padding: 20px; +} +``` + +{{EmbedLiveSample("align-content-column", "", "380px")}} ## 主軸上での配置 ここまで交差軸上での配置がどのように動くかを見てきましたが、ここでは主軸上での配置について見ていきます。使えるプロパティは `justify-content` の一つだけです。アイテムは主軸上ではグループとしてのみ扱われるため、プロパティも一種類となります。 `justify-content` では、アイテムを表示するのに必要な分よりも大きい空間がある場合の分配可能な余白の扱いを制御できます。 -コンテナーに `display: flex` を設定した最初の例では、アイテムはコンテナーの始点に一行に整列して表示されます。これは `justify-content` の初期値が `flex-start` であるためです。すべての分配可能な余白はアイテムの後ろに置かれます。 +コンテナーに `display: flex` を設定した最初の例では、アイテムはコンテナーの始点に一行に整列して表示されます。これは `justify-content` の初期値が `normal` であり、これは `start` として動作するためです。すべての分配可能な余白はアイテムの後ろに置かれます。 ![3 つの 100 ピクセル幅のアイテムが 500 ピクセル幅のコンテナー内にある。分配可能な余白はアイテムの後ろに置かれる。](align6.png) -`justify-content` プロパティは `align-content` と同じ値を受け付けます。 +`baseline` の値はこの軸には関連ありません。 `justify-content` プロパティは `align-content` と同じ値を受け付けます。 - `justify-content: flex-start` - `justify-content: flex-end` +- `justify-content: start` +- `justify-content: end` +- `justify-content: left` +- `justify-content: right` - `justify-content: center` - `justify-content: space-between` - `justify-content: space-around` -- `justify-content: space-evenly` (フレックスボックス仕様書には含まれていない) +- `justify-content: space-evenly` +- `justify-content: stretch` （start として動作） +- `justify-content: normal` （stretch として動作し、これは start として動作する） 次の例では、 `justify-content` の値は `space-between` となっています。アイテムを表示した後に余った分配可能な余白は、アイテムの間に分配されます。左右の端のアイテムはそれぞれ始点と末尾に揃えて並びます。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} - -`flex-direction` が `column` に設定されて主軸がブロック方向となっているとき、`justify-content` はフレックスコンテナー内の分配可能なスペースがあれば、アイテム間にその方向にそってスペースを分配します。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} +```html live-sample___justify-content +
+
One
+
Two
+
Three
+
Four
+
+``` + +```css live-sample___justify-content +.box { + display: flex; + justify-content: space-between; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content")}} + +`flex-direction` が `column` に設定されて主軸がブロック方向となっているとき、`justify-content` はフレックスコンテナー内の分配可能な余白があれば、アイテム間にその方向にそって余白を分配します。 + +```html live-sample___justify-content-column +
+
One
+
Two
+
Three
+
Four
+
+``` + +```css live-sample___justify-content-column +.box { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 300px; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content-column", "", "380px")}} ## 配置と書字方向 -上述の配置方法において、`flex-start` と `flex-end` はいずれも書字方向に対応したものとなります。`justify-content` の値が `start` で、書字方向が英語のような左書きであれば、アイテムはコンテナーの左端から並べられます。 +上述の配置方法において、`start` と `end` はいずれも書字方向に対応したものとなります。 `justify-content` の値が `start` で、書字方向が英語のような左書きであれば、アイテムはコンテナーの左端から並べられます。 ![3 つのアイテムが左側に並んでいる](basics5.png) @@ -140,25 +393,75 @@ l10n: 以下の例ではフレックスアイテムを右から左に並べるために `direction` プロパティを `rtl` を設定しています。この設定を削除したり `justify-content` の値を変更するなどして、行が右から始まる場合のフレックスボックスの動作を確認してください。 -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} - -## 配置と flex-direction - -`flex-direction` プロパティを変更した場合にも、始点は変わります。例えば `row` の代わりに `row-reverse` を設定した場合などがこれにあたります。 - -次の例では、`flex-direction: row-reverse` と `justify-content: flex-end` を設定してアイテムをレイアウトしています。左書きの言語では、すべてのアイテムは左側に並びます。`flex-direction: row-reverse` の値を `flex-direction: row` に変更してみてください。アイテムが右側に移動することがわかります。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} - -こうした動作は少し紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸、行方向の軸に沿ってフレックスアイテムが配置されます。`flex-start` は文の中でテキストが始まる側を示すことになります。 +```html live-sample___justify-content-writing-mode +
+
One
+
Two
+
Three
+
Four
+
+``` + +```css live-sample___justify-content-writing-mode +.box { + direction: rtl; + display: flex; + justify-content: flex-end; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content-writing-mode")}} + +## 配置と `flex-direction` + +`flex-direction` プロパティを変更した場合にも、行の `start` の方向は変わります。例えば `row` の代わりに `row-reverse` を設定した場合などです。 + +この例では、 `flex-direction: row-reverse` と `justify-content: flex-end` で、フレックスコンテナー内でアイテムの向きと位置を定義しています。左書きの言語では、アイテムは左に並びます。 `flex-direction: row-reverse` を `flex-direction: row` に変更してみてください。これでアイテムが右側に移され、視覚的な順序が逆になることがわかります。 + +```html live-sample___justify-content-reverse +
+
One
+
Two
+
Three
+
Four
+
+``` + +```css live-sample___justify-content-reverse +.box { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("justify-content-reverse")}} + +こうした動作は少し紛らわしいかもしれませんが、覚えておくべき原則として、何かを変更しない限りは、文書の言語において単語が配置される方向にインライン軸、行方向の軸に沿ってフレックスアイテムが配置されます。 `start` と `flex-start` は文の中でテキストの先頭側から始まることになります。 ![左から始まり右で終わることを示す図。](align8.png) -`flex-direction: column` を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は `flex-start` は段落が始まる先頭を示すことになります。 +`flex-direction: column` を使うことで、アイテムの配置方向を文書の言語におけるブロック方向に変更することもできます。この場合は `start` と `flex-start` は段落が始まる先頭を示すことになります。 ![上から始まり下で終わることを示す図](align10.png) -`flex-direction` を逆方向の値のいずれかに変更すると、軸の末尾側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。 `flex-start` はその軸の末尾側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。 +`flex-direction` を逆方向の値のいずれかに変更すると、軸の末尾側から文書の言語において単語が書かれる方向と逆方向にレイアウトされます。 `start` と `flex-start` はその軸の末尾側、つまりインライン方向では行を折り返す側、ブロック方向では最後の文が終わる側を示すことになります。 ![右から始まり左で終わることを示す図](align9.png) @@ -168,24 +471,86 @@ l10n: 主軸上ではアイテムは一つのグループとして扱われるため、`justify-items` プロパティや `justify-self` プロパティに相当するものはありません。しかし、フレックスボックスと併せて auto マージンを使ってアイテム毎の配置をすれば、個別のアイテムまたは一部アイテムのグループを他のアイテムから分離して配置することができます。 -よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは `justify-self` プロパティの使いどころだと思われるでしょうが、以下の図について考えてみましょう。3 つのアイテムが片方にあり、もう一方に 2 つのアイテムがあります。もし仮に `justify-self` をアイテム _d_ に対して使うことができたとすると、意図したものであってもそうでなくても、それに続くアイテム _e_ の配置も変わってしまうでしょう。 +よくあるパターンは、ナビゲーションバーでいくつかのキーアイテムが右に配置され、メイングループは左に配置されるようなものです。このようなケースは `justify-self` プロパティの使いどころだと思われるでしょう。しかし、以下の図について考えてみましょう。この例では、次の図のように、 3 つのアイテムが片方にあり、もう一方に 2 つのアイテムがあります。もし仮に `justify-self` をアイテム _d_ に対して使うことができたとすると、意図したものであってもそうでなくても、それに続くアイテム _e_ の配置も変わってしまうでしょう。 ![2 つのグループに分かれた 5 つのアイテム。3 つは左側にあり、2 つは右側にある。](align7.png) -4 つめのアイテムに対して `justify-content` ではなく `margin-left` に `auto` を設定すれば、先頭の 3 つから分離できます。auto マージンはマージンの方向に沿った余白をすべて占有しようとしますが、これは左右に auto マージンを設定して要素をブロック内で中央揃えするときと同じです。両側のマージンが取れるだけの余白を取ろうとするために、ブロックが中央に押し出されることになります。 - -以下の例では、最小限のフレックス設定をして一行に並べたフレックスアイテムと、`margin-left: auto` を設定した `push` クラスを定義しています。このクラスを削除したり他のアイテムに追加して、どのような動作をするのか確かめてください。 - -{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} +代わりに、 _d_ のアイテムを CSS マージンによって押しやることができます。 + +このライブサンプルでは、アイテム 4 の {{cssxref("margin-left")}} を `auto` に設定することで、最初の 3 つのアイテムから分離し、その軸にあるすべての余白を消費しています。これは、 {{cssxref("margin")}} で左右を auto にしてブロックを中央に配置する動作と同じ仕組みです。それぞれの辺はできる限りの空間を取ろうとするので、ブロックは中央へ押し込まれます。 + +このライブサンプルでは、フレックスアイテムは基本的なフレックス値で 1 行に並べられており、4 番目のアイテムに設定したクラス `push` は、そのアイテムに `margin-left: auto` を適用しています。 4 番目のアイテムのクラスを取り除くか、別のアイテムにクラスを追加して、どのように動作するのか試してみてください。 + +```html live-sample___auto-margins +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` + +```css live-sample___auto-margins +.box { + display: flex; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +.push { + margin-left: auto; +} +``` + +{{EmbedLiveSample("auto-margins")}} ## アイテム間にすき間を作成 -フレックスのアイテム間にすき間を作るには、{{cssxref("gap")}}、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}の各プロパティを使用します。{{cssxref("column-gap")}} プロパティは、行内のアイテム間にすき間を作成します。{{cssxref("row-gap")}} プロパティは、{{cssxref("flex-wrap")}} が `wrap` に設定されている場合、フレックス行間にすき間を作成します。{{cssxref("gap")}} プロパティは、両方を一緒に設定する一括指定です。 - -{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}} +フレックスのアイテム間にすき間を作るには、{{cssxref("gap")}}、{{cssxref("column-gap")}}、{{cssxref("row-gap")}}の各プロパティを使用します。{{cssxref("column-gap")}} プロパティは、行内のアイテム間にすき間を作成します。{{cssxref("row-gap")}} プロパティは、{{cssxref("flex-wrap")}} が `wrap` に設定されている場合、フレックス行間にすき間を作成します。 + +{{cssxref("gap")}} プロパティは、 `row-gap` と `column-gap` の両方を一緒に設定する一括指定です。 +フレックスアイテム間またはフレックス行間の隙間は方向によって変わります。 {{cssxref("flex-direction")}} プロパティが行を作成する場合、最初の値はフレックス行間の隙間を定義し、 2 つ目の値はそれぞれの行内のアイテム間の隙間を定義します。列の場合（`flex-direction` を `column` または `column-reverse` に設定した場合）、最初の値はフレックスアイテム間の隙間を定義し、 2 つ目の値はフレックス行間の隙間を定義します。 + +```html live-sample___gap +
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
+``` + +```css live-sample___gap +.box { + display: flex; + flex-wrap: wrap; + row-gap: 10px; + column-gap: 2em; + border: 2px dotted rgb(96 139 168); +} + +.box > * { + flex: 1; + padding: 20px; + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} +``` + +{{EmbedLiveSample("gap")}} ## 関連情報 -- [ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment) +- [ボックス配置](/ja/docs/Web/CSS/CSS_box_alignment)モジュール +- [CSS フレックスボックスレイアウト](/ja/docs/Web/CSS/CSS_flexible_box_layout)モジュール - [フレックスボックスでのボックス配置](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) - [グリッドレイアウトでのボックス配置](/ja/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) From f6c3371be24822cb521bc83b17594c3b3464b5e5 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Nov 2024 19:24:42 +0900 Subject: [PATCH 03/96] =?UTF-8?q?2024/11/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.md | 330 ++++++++++++++---- 1 file changed, 261 insertions(+), 69 deletions(-) diff --git a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md index b6ab4c6f1f08a4..0305c35df28b6d 100644 --- a/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md +++ b/files/ja/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_axis/index.md @@ -2,12 +2,12 @@ title: 主軸方向のフレックスアイテムの比率の制御 slug: Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis l10n: - sourceCommit: 883b021c97375f872d0702f0d0747b1373155cef + sourceCommit: 40590706f9ab23242bcd8c8966cc683d7d5b18aa --- {{CSSRef}} -このガイドでは、フレックスアイテムに適用され、主軸に沿ってアイテムの寸法と自由度を制御することができる 3 つのプロパティ — {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} を見ていきます。これらのプロパティがどのようにアイテムを伸縮させるかについて完全に理解することが、フレックスボックスをマスターするための鍵です。 +このガイドでは、主軸に沿ってアイテムの寸法と自由度を制御することができる 3 つのプロパティ、 {{CSSxRef("flex-grow")}}, {{CSSxRef("flex-shrink")}}, {{CSSxRef("flex-basis")}} を見ていきます。これらのプロパティがどのようにフレックスアイテムを伸縮させるかについて完全に理解することが、 [CSS フレックスボックス](/ja/docs/Web/CSS/CSS_flexible_box_layout)をマスターするための鍵です。 ## 最初に見てみる @@ -17,7 +17,7 @@ l10n: - `flex-shrink`: このアイテムから縮小できる負の余白はどれくらいか。 - `flex-basis`: 伸長や縮小が発生する前のアイテムの寸法はいくつか。 -プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティとして表されます。以下のコードは `flex-grow` プロパティを `2` に、 `flex-shrink` を `1` に、 `flex-basis` を `auto` に設定します。 +プロパティは通常、一括指定の {{CSSxRef("flex")}} プロパティを使用して表します。以下のコードは `flex-grow` プロパティを `2` に、 `flex-shrink` を `1` に、 `flex-basis` を `auto` に設定します。 ```css .item { @@ -25,156 +25,348 @@ l10n: } ``` -すでに[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)の記事を読んでいるのであれば、すでにこれらのプロパティの紹介を受けているでしょう。ここではこれらを掘り下げ、使用するとブラウザーが何をするかを完全に理解できるようにします。 - ## 主軸に合わせて動作する重要概念 -主軸方向の比率を制御するためのフレックスプロパティの機能を見る前に、いくつかの概念を確認しておきましょう。これらは、フレックスアイテムの成長や縮小が起こる前の*自然な*寸法と、余白の概念に関連しています。 +`flex` プロパティを理解するためには、伸縮が起こる前のフレックスアイテムの自然なサイズを知ることが役立ちます。さらに、主軸に沿ったすべてのフレックスアイテムの自然なサイズを組み合わせたものと主軸自体のサイズとの差である自由空間の概念を理解することも重要です。 ### フレックスアイテムの寸法の変更 -フレックスアイテムをレイアウトするための空間を確保するには、まずアイテムの大きさをブラウザーが知る必要があります。絶対的な長さの単位で適用される幅や高さを持たないアイテムは、どのようにして処理されるのでしょうか。 +フレックスアイテムをレイアウトするために利用できる空間を決定するために、ブラウザーはアイテムがどれくらいの大きさから始まるのかを知る必要があります。絶対的な長さの単位で適用される幅や高さを持たないアイテムは、どのようにして計算されるのでしょうか。 -CSS には {{CSSxRef('min-content')}} と {{CSSxRef('max-content')}} という概念があります。これらのキーワードは[長さの単位](/ja/docs/Web/CSS/length)の代わりに使用することができます。 +CSS では、 {{CSSxRef("min-content")}} と {{CSSxRef("max-content")}} キーワードを {{cssxref("length")}} 単位の代わりに使用することができます。一般的に、 `min-content` は要素が最も長い単語を収めることができる最小のサイズであり、 `max-content` は要素が折り返されることなくすべてのコンテンツを収めるために必要なサイズです。 -例えば、以下のライブ例では、テキストの文字列を含む 2 つの段落要素があります。1 つ目の段落の幅は `min-content` となっています。このキーワードに対応しているブラウザーでは、テキストのソフトな折り返しの機会をすべて利用して、はみ出さない範囲で小さくなっているのがわかるはずです。これが、その文字列の最小コンテンツサイズです。基本的には、文字列の中で最も長い単語が大きさを決定します。 +下記の例は、異なる文字列を持つ 2 つの段落要素を格納しています。最初の段落の幅は `min-content` です。テキストが利用利用可能なソフトラップの機会をすべて使用して、はみ出すことなく可能な限り小さくなっていることに注目してください。これがその文字列の `min-content` サイズです。基本的に、文字列の中で最も長い単語がサイズを決定しています。 -2 つ目の段落は、 `max-content` という値を持っているので、逆のことをしています。これは可能な限り大きくして、ソフトな折り返しの機会を与えません。コンテナーが狭すぎるとボックスからあふれてしまいます。 +2 つ目の段落は、 `max-content` の値を持ち、その逆を行います。ソフトラップの機会を取ることなく、コンテンツに合わせて必要なだけ大きくなります。コンテナー内で狭すぎるとはみ出します。 -{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}} +```html live-sample___min-max-content +

+ I am sized with min-content and so I will take all of the soft-wrapping + opportunities. +

+

+ I am sized with max-content and so I will take none of the soft-wrapping + opportunities. +

+``` + +```css live-sample___min-max-content +.min-content { + width: min-content; + border: 2px dotted rgb(96 139 168); +} +.max-content { + width: max-content; + border: 2px dotted rgb(96 139 168); +} +``` + +{{EmbedLiveSample("min-max-content", "", "260px")}} この動作と、`min-content` および `max-content` がどのような効果を持つかについては、後述の `flex-grow` と `flex-shrink` の説明で覚えておいてください。 ### 正と負の余白 -これらの特性を説明するには、**正と負の余白**の概念を理解する必要があります。フレックスコンテナーに正の余白がある場合は、コンテナー内にフレックスアイテムを表示するのに必要な空間よりも大きな空間があるということです。たとえば 幅が 500 ピクセルのコンテナーで、{{CSSxRef("flex-direction")}} が `row` であり、幅 100 ピクセルのフレックスアイテムが 3 つあった場合、正の余白が 200 ピクセルあり、コンテナーいっぱいに表示したい場合は、各アイテムに分配することができます。 +**正と負の余白**の概念も理解する必要があります。フレックスコンテナーに正の余白がある場合、コンテナーの中にはフレックスアイテムを表示するのに要求される以上の空間があります。例えば、横幅 `500px` のコンテナーで、 {{CSSxRef("flex-direction")}} を `row` に設定し、横幅 `100px` のフレックスアイテムを 3 つ格納した場合、 `200px` の正の余白があります。コンテナー内を埋め尽くしたい場合は、この正の余白をアイテムの間に分配することができます。 ![アイテムを配置した後で空間が残っていることを表す画像です。](basics7.png) -アイテムの自然な大きさの合計が、フレックスコンテナー内の利用可能な空間よりも大きい場合、負の余白が発生します。上の図のように幅 500 ピクセルのコンテナーがあるものの、3 つのフレックスアイテムの幅がそれぞれ 200 ピクセルであった場合、必要な空間は合計で 600 ピクセルとなり、100 ピクセルの負の余白が発生します。これをアイテムから取り除くことで、コンテナーに合わせることができます。 +フレックスコンテナーに負の余白があるというのは、フレックスコンテナー内で利用できる空間よりも、フレックスアイテムの自然なサイズの合計値の方が大きい場合です。上記の `500px` 幅のコンテナー内で、 3 つのフレックスアイテムの幅が `100px` ではなく `200px` の場合、それらの自然な幅の合計は `600px` となり、 `100px` の負の余白が生じます。この空間をアイテムから除去してコンテナー内に収まるようにしないと、アイテムがはみ出してしまいます。 -![アイテムがコンテナーからあふれてしまう](ratios1.png) +![アイテムがコンテナーからはみ出してしまう](ratios1.png) -フレックスのプロパティを理解するには、この正の余白の分配と負の余白の除去を理解する必要があります。 +フレックス一括指定のプロパティの成分を知るためには、この正の余白の分配と負の余白の除去を理解する必要があります。 -以下の例では、{{CSSxRef("flex-direction")}} を row (行) に設定して作業しているので、アイテムの寸法は常に幅に基づいて決定されます。すべてのアイテムの幅の合計とコンテナーの幅を比較して、正と負の余白を計算します。それぞれの例を `flex-direction: column` で試すこともできます。主軸が列になり、アイテムの高さと、アイテムが入っているコンテナーの高さを比較して、プラスとマイナスの余白を計算する必要が出てきます。 +以下の例では、{{CSSxRef("flex-direction")}} を `row` (行) に設定されているので、アイテムの寸法は幅に基づいて決定されます。すべてのアイテムの幅の合計とコンテナーの幅を比較して、正と負の余白を計算します。それぞれの例を `flex-direction: column` で試すこともできます。主軸が列になり、アイテムの高さと、アイテムが入っているコンテナーの高さを比較して、正と負の余白を計算する必要が出てきます。 -## flex-basis プロパティ +## `flex-basis` プロパティ -{{CSSxRef("flex-basis")}} プロパティは、余白の分配が行われる前のフレックスアイテムの初期の大きさを指定します。このプロパティの初期値は `auto` です。`flex-basis` が `auto` に設定されている場合、ブラウザーはアイテムの初期の大きさを計算するために、まずアイテムの主軸方向の寸法に絶対寸法が設定されているかどうかをチェックします。例えば、アイテムの幅を 200 ピクセルに設定している場合です。この場合、`200px` がこのアイテムのフレックスベースとなります。 +{{CSSxRef("flex-basis")}} プロパティは、正または負の余白を分配する前のフレックスアイテムの初期サイズを指定します。このプロパティの初期値は `auto` です。このプロパティは、 {{cssxref("width")}} および {{cssxref("height")}} プロパティと同じ値を受け入れ、 `content` キーワードも受け入れます。 -アイテムの寸法が自動になっている場合、 `auto` を指定すると内容物の寸法が解決値になります。このとき、 `min-` および `max-content` の寸法に関する知識があると便利です。フレックスボックスでは、アイテムの `max-content` の寸法を `flex-basis` として使用します。次のライブ例でこれを説明します。 +`flex-basis` が `auto` に設定されている場合、アイテムの初期サイズは、主要サイズが設定されていれば、その {{cssxref("length-percentage")}} サイズになります。例えば、あるアイテムに `width: 200px` が設定されている場合、 `200px` がそのアイテムの `flex-basis` になります。パーセント値は、フレックスコンテナーの内部の主要サイズに対する相対値です。 `width: 50%` が設定されている場合、このアイテムの `flex-basis` はコンテナーのコンテンツボックスの幅の半分になります。そのようなサイズが設定されていない場合、つまりアイテムが自動サイズである場合、 `auto` はそのコンテンツのサイズに解決され（上記の [`min-` および `max-content` のサイズ](#フレックスアイテムの寸法の変更)の説明を参照）、 `flex-basis` はアイテムの `max-content` という意味になります。 -この例では、柔軟性のない一連のボックスを作成し、 `flex-grow` と `flex-shrink` の両方を `0` に設定しています。ここでは、主軸方向の寸法として 150 ピクセルの幅を明示的に設定した最初のアイテムが、 `flex-basis` として `150px` を取るのに対し、他の 2 つのアイテムは幅を持たないため、コンテンツの幅に応じたサイズになっていることがわかります。 +この例では、 `flex-grow` と `flex-shrink` の両方を `0` に設定した、柔軟性のないフレックスアイテムが 3 つ含まれています。 最初のアイテムの幅は `150px` で、 `flex-basis` は `150px` に設定されていますが、他の 2 つのアイテムは幅が設定されていないため、コンテンツの幅または `max-content` に応じてサイズが設定されます。 -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}} +```html live-sample___flex-basis +
+
One
+
Two
+
Three
+
+``` -`auto` キーワードに加えて、`content` キーワードを `flex-basis` として使用することができます。この場合、アイテムに幅が設定されていても、コンテンツの寸法から `flex-basis` が算出されます。これは新しいキーワードで、ブラウザーの対応も少ないのですが、 `auto` を flex-basis として使用し、アイテムに幅を設定しないようにすることで、自動で寸法が調整されるので、常に同じ効果を得ることができます。 +```css live-sample___flex-basis +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 0 0 auto; +} -余白の分配を行う際に、フレックスボックスでアイテムの寸法を完全に無視したい場合は、 `flex-basis` を `0` に設定します。これは基本的に、フレックスボックスのすべての空間が利用可能であり、それをアイテムに比例して分配することを指示します。この例は、次に紹介する `flex-grow` で見てみましょう。 +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} + +.box :first-child { + width: 150px; +} +``` -## flex-grow プロパティ +{{EmbedLiveSample("flex-basis")}} + +`auto` キーワードとそれ以外の有効な {{cssxref("width")}} 値に加えて、`content` キーワードを `flex-basis` として使用することができます。この場合、`flex-basis`は、アイテムに `width` が設定されていてもコンテンツの寸法に基づきます。これは、設定されている幅を除去し、`flex-basis` として `auto` を使用するのと同じ効果を生み出します。 `max-content` を設定するのと似ていますが、 `content` の値を設定すると、交差軸上の寸法に基づいて {{cssxref("aspect-ratio")}} を計算することができます。 + +余白の分配の際にフレックスアイテムのサイズを完全に無視したい場合は、 `flex-basis` を `0` に設定し、 `flex-grow` に `0` 以外の値を設定します。この値を実際に見ていく前に、 `flex-grow` を学びましょう。 + +## `flex-grow` プロパティ {{CSSxRef("flex-grow")}} プロパティは、**フレックス伸長係数**を指定します。これは、正の余白が分配されたときに、フレックスアイテムがフレックスコンテナー内の他のフレックスアイテムに対してどれだけ伸長するかを決定します。 -すべてのアイテムの `flex-grow` 係数が同じであれば、余白はすべてのアイテムに均等に分配されます。このような場合、ふつうは値に `1` を使用しますが、すべてのアイテムに `flex-grow` の値として `88`、`100`、`1.2` など与えることもできます。これは係数です。係数がすべてのアイテムで等しく、フレックスコンテナー内に正の余白があれば、すべてのアイテムに均等に分配されます。 +すべてのアイテムの `flex-grow` 係数が同じであれば、正の余白はすべてのアイテムに均等に分配されます。この場合、一般的には `flex-grow: 1` を設定しますが、任意の値、例えば `88`、`100`、`1.2` などが設定できます。コンテナー内ですべてのフレックスアイテムに同じ係数が設定され、正の余白がある場合、その余白は均等に分配されます。 -### `flex-grow` と `flex-basis` を組み合わせる +### `flex-grow` と `flex-basis` の組み合わせ `flex-grow` と `flex-basis` がどのように相互作用するかという点については混乱しやすいものです。コンテンツの長さが異なる 3 つのフレックスアイテムに、次のような `flex` ルールを適用した場合を考えてみましょう。 -`flex: 1 1 auto;` +```css +.class { + flex: 1 1 auto; +} +``` + +この場合、 `flex-basis` の値は `auto` で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、使用される `flex-basis` は各アイテムの `max-content` の寸法です。アイテムを配置した後、フレックスコンテナー内には正の余白があります。下記画像では斜線を引いた領域で示されています。斜線を引いた領域は正の余白で、 `flex-grow` 係数に基づいて 3 つのアイテムに分配されます。 + +![3 つのアイテムが幅の半分強を占め、残りの幅は斜線が引かれています。](ratios2.png) + +コンテンツの寸法に等しい `flex-basis` を使用しています。すなわち、利用できる空間全体（フレックスコンテナーの幅）から引き算で分配可能な余白が求められ、残りの余白は 3 つのアイテム間で均等に分配されます。最も大きなアイテムは、もともとより大きなサイズから始まり、他と同じ空間が分配されるので、最も大きなままになります。 -この場合、 `flex-basis` の値は `auto` で、アイテムには幅が設定されていないので、寸法は自動調整されます。つまり、フレックスボックスはアイテムの `max-content` の寸法を見ていることになります。アイテムを並べると、フレックスコンテナー内に正の余白 (この画像で斜線を引いた部分) ができます。 +![ハッチングされた部分は3つに分割され、それぞれのアイテムに単一の部分が追加されました。](ratios3.png) -![正の余白を斜線で表現している画像](ratios2.png) +元の要素の大きさが異なっていても、3 つのアイテムを同じ大きさにしたいのであれば、 `flex-basis` 成分を `0` にしてください。 + +```css +.class { + flex: 1 1 0; +} +``` + +ここでは、空間分配の計算のために、各アイテムの寸法を `0` に設定しています。これによって、すべての空間が分配に利用できるようになります。すべてのアイテムが同じ `flex-grow` 係数をを持っていますので、それぞれ等しい大きさの空間を取得します。この結果、 3 つの同じ幅のフレックスアイテムができます。 + +このライブサンプルで、 `flex-grow` 係数を 1 から 0 に変更して、動作の違いを確認してみてください。 + +```html live-sample___flex-grow +
+
One
+
Two
+
Three にはもっとコンテンツがあります
+
+``` + +```css live-sample___flex-grow +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 0; +} + +.box { + width: 400px; + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` -コンテンツの寸法と同じ `flex-basis` を使用しているので、全体の利用可能な空間（フレックスコンテナーの幅）から分配可能な領域を差し引いた余白を各アイテムに均等に分配しています。より大きなアイテムは、他のアイテムと同じ量の余白が割り当てられますが、もともと寸法が大きいので、結果的にもっと大きくなります。 +{{EmbedLiveSample("flex-grow")}} -![正の余白は、アイテム間に分配される](ratios3.png) +### アイテムに個別の flex-grow 係数を与える -もし本当に実現したいことが 3 つのアイテムを同じ大きさにすることであれば、最初の寸法が異なっていても、これを使用してください。 +`flex-grow`と `flex-basis` を一緒に使用すると、異なる `flex-grow` 係数を設定することで、個々のアイテムの大きさを制御することができます。すべての空間を分配できるように `flex-basis` を `0` にしておくと、それぞれのアイテムに異なる `flex-grow` 係数を割り当てることで、異なる大きさのフレックスアイテムを作成することができます。 -`flex: 1 1 0;` +下記の例では、最初の2つのアイテムには `flex-grow` の係数として `1` を使用し、3つ目には倍の `2` を使用しています。 `flex-basis: 0` をすべてのアイテムに設定すると、利用できる空間は次のように配分されます。 -ここでは、余白の分配の計算上、アイテムの寸法を `0` としています。すべての空間が確保され、すべてのアイテムが同じ `flex-grow` 係数を持っているので、それぞれに同じ量の余白が分配されることになります。最終的には、3 つの同じ幅の伸縮可能なアイテムができあがります。 +1. すべての兄弟フレックスアイテムの `flex-grow` 係数値が一斉に追加されます（この場合合計は 4 です）。 +2. フレックスコンテナー内で正の自由空間をこの合計値で割ります。 +3. 自由空間は個々の値に応じて分配されます。この場合、最初のアイテムは 1 部、 2 つ目は 1 部、 3 つ目は 2 部を取得します。ということは、 3 つ目のアイテムは最初と 2 つ目のアイテムの 2 倍の大きさということになります。 -このライブ例で、 `flex-grow` 係数を 1 から 0 に変更して、動作の違いを確認してみてください。 +```html live-sample___flex-grow-ratios +
+
One
+
Two
+
Three
+
+``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}} +```css live-sample___flex-grow-ratios +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 0; +} -### アイテムに個別の flex-grow 要素を与える +.box { + border: 2px dotted rgb(96 139 168); + display: flex; +} -`flex-grow` と `flex-basis` の関係を理解すると、アイテムに様々な `flex-grow` 係数を割り当てることで、個々のアイテムの大きさをさらに制御することができるようになります。 `flex-basis` を `0` にして、すべての空間を分配できるようにした場合、3 つのフレックスアイテムにそれぞれ異なる `flex-grow` ファクターを割り当てることができます。以下の例では、次のような値を使用しています。 +.one { + flex: 1 1 0; +} -- 1 番目のアイテムには `1` -- 2 番目のアイテムには `1` -- 3 番目のアイテムには `2` +.two { + flex: 1 1 0; +} -`flex-basis` を `0` とすると、余白は次のように分配されます。まずフレックス伸長係数を合計し、フレックスコンテナー内の正の余白の合計をその数値、この場合は 4 で割ります。それからそれぞれの値に応じて余白を分配します。 — 1 番目のアイテムは 1 つ分、2 番目は 1 つ分、3 番目は 2 つ分になります。つまり、3 番目のアイテムは、1 番目と 2 番目のアイテムの 2 倍の大きさになります。 +.three { + flex: 2 1 0; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}} +{{EmbedLiveSample("flex-grow-ratios")}} -ここでは、どんな正の値も使用できることを覚えておいてください。重要なのは、ある項目と他の項目との比率です。大きな数字を使っても、小数を使っても構いません。 — あなた次第です。試しに、上の例で割り当てられた値を `.25`, `.25`, `.50` に変更してみてください。 — 同じ結果が得られるはずです。 +ここでは、どんな正の値も使用できることを覚えておいてください。重要なのはアイテム間の比率です。大きな数字や小数を使用することができますが、それはあなた次第です。これを検証するために、この例の `flex-grow` の値を `.25`、`.25`、`.50` に変えてみてください。同じ結果になるはずです。 -## flex-shrink プロパティ +## `flex-shrink` プロパティ {{CSSxRef("flex-shrink")}} プロパティでは、**フレックス縮小係数**を指定します。これは、負の余白が分配されたときに、フレックスコンテナー内の他のフレックスアイテムに対して、フレックスアイテムがどれだけ縮小するかを決定します。 -このプロパティは、ブラウザーがフレックスアイテムの `flex-basis` 値を計算して、フレックスコンテナーに収まらない大きさだと判断した場合に対処します。`flex-shrink` に正の値があれば、コンテナーからはみ出さないようにアイテムが縮小されます。 +このプロパティは、フレックスアイテムの `flex-basis` の結合値が大きすぎてフレックスコンテナー内で収まらず、あふれてしまう場合に対処します。アイテムの `flex-shrink` が正の値である限り、アイテムはコンテナー内であふれないように縮小されます。 -つまり、 `flex-grow` が余白を追加する扱いをするのに対し、 `flex-shrink` はボックスがはみ出さずにコンテナーに収まるように空間を縮小する扱いをします。 +`flex-grow` は伸長可能なアイテムに利用できる空間を追加するために使用しますが、 `flex-shrink` は、アイテムがあふれず、コンテナー内で確実に収まるように空間を縮小するために使用します。 -次のライブ例では、3 つのアイテムをフレックスコンテナーに入れています。それぞれに 200 ピクセルの幅を与え、コンテナーの幅は 500 ピクセルにしています。 `flex-shrink` を `0` に設定すると、アイテムは縮小できないので、ボックスからはみ出してしまいます。 +次の例では、 3 つの `200px` 幅のフレックスアイテムが `500px` 幅のコンテナー内にあります。 `flex-shrink` を `0` に設定すると、アイテムは縮小されず、コンテナー内からあふれてしまいます。 -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}} +```html live-sample___flex-shrink +
+
One
+
Two
+
Three にはもっとコンテンツがあります
+
+``` -`flex-shrink` の値を `1` に変更すると、すべてのアイテムがボックスに収まるように、各アイテムが同じ量だけ縮小されるのがわかります。これは、すべてのアイテムがボックスに収まるようにするために、最初の幅よりも小さくしたものです。 +```css live-sample___flex-shrink +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 0 0 auto; + width: 200px; +} + +.box { + width: 500px; + border: 2px dotted rgb(96 139 168); + display: flex; +} +``` + +{{EmbedLiveSample("flex-shrink")}} + +`flex-shrink` 値を `1` に変更すると、各アイテムは同じ量だけ縮小され、すべてのアイテムがコンテナー内で収まります。それぞれのアイテムから負の余白が比例して除去され、それぞれのフレックスアイテムは最初の幅よりも小さくなります。 ### `flex-shrink` と `flex-basis` の組み合わせ -`flex-shrink` は、`flex-grow` とほとんど同じように動作すると言えるでしょう。しかし、*完全に*同じではない理由が 2 つあります。 +一見、 `flex-shrink` は `flex-grow` と同じように、要素を伸長させるのではなく、縮小させる方法で動作するように見えるかもしれません。しかし、注意すべき重要な違いがいくつかあります。 + +[フレックスベースサイズ](#何がアイテムの基本的な寸法を決定するか)の概念は、フレックスアイテム間で負の余白をどのように配分するかに影響します。負の余白を分配するときは、フレックス縮小係数にフレックスベースサイズを掛けます。これにより、アイテムがどれだけ縮むことができるかに比例して、負の余白が分配されます。例えば、大きなアイテムが顕著に縮小する前に、小さなアイテムがゼロに縮小することはありません。 + +小さなアイテムは `min-content` の寸法未満に縮小されることはありません。これは、使用できるソフトラップの機会をすべて使用した場合の要素の最小寸法です。 -通常は些細な違いですが、仕様に定義されていることは、負の余白に対して `flex-shrink` が行うことが、正の余白に対して `flex-grow` が行うこととまったく同じではない理由の一つです。 +以下の例では、 `min-content` が下限になり、 `flex-basis` が内容物の大きさに解決されていることがわかります。フレックスコンテナーの幅を 700px などに変更してからフレックスアイテムの幅を小さくすると、最初の 2 つのアイテムは折り返されますが、 `min-content` の寸法より小さくなることはありません。ボックスが小さくなると、3 つ目のアイテムが縮小します。 -> 「注：負の余白を分配する際には、フレックス縮小係数にフレックスベースの大きさが乗じられます。これは、アイテムが縮小できる量に比例して負の余白を分配するもので、例えば、大きなアイテムが目に見えて縮小する小さなアイテムが、大きなアイテムが目立って縮小する前にゼロまで縮小してしまうことはありません。」 +```html live-sample___flex-shrink-min-content +
+
Item One
+
Item Two
+
Item Three はもっとコンテンツがあるため、もっと大きくなります
+
+``` -2 つ目の理由は、フレックスボックスは、負の余白を除去する際に小さなアイテムがゼロの大きさにまで縮小することを防ぐためです。アイテムは `min-content` の寸法が下限になります。 — 可能な限りすべてのワードラップの機会を利用した後の寸法です。 +```css live-sample___flex-shrink-min-content +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + flex: 1 1 auto; +} -以下の例では、 `min-content` の下限になり、 `flex-basis` が内容物の大きさに解決されていることがわかります。フレックスコンテナーの幅を 700px などに変更してからフレックスアイテムの幅を小さくすると、最初の 2 つのアイテムは折り返されますが、 `min-content` の寸法より小さくなることはありません。ボックスが小さくなると、3 つ目のアイテムが縮小します。 +.box { + border: 2px dotted rgb(96 139 168); + width: 500px; + display: flex; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}} +{{EmbedLiveSample("flex-shrink-min-content")}} -実際には、縮小の動作は妥当な結果をもたらす傾向があります。通常、内容物が完全に消えてしまったり、ボックスが最小の内容物よりも小さくなってしまったりすることはありません。そのため、上記のルールは、コンテナーに収まるように内容物を縮小する必要がある場合の適切な動作という点で、理にかなっています。 +実際には、この縮小動作は妥当な結果をもたらします。コンテンツが完全に消えてしまったり、コンテンツの最小サイズより小さくなってしまったりするのを防ぎます。上記のルールは、コンテナーに合わせて縮小する必要があるコンテンツには理にかなっています。 ### アイテムに別の `flex-shrink` 要素を与える `flex-grow` と同様に、それぞれのフレックスアイテムに異なる `flex-shrink` 係数を与えることができます。これにより、たとえば、あるアイテムを兄弟アイテムよりも急速に縮小させたり、まったく縮小させないようにしたい場合に、既定の動作を変更することができます。 -次のライブ例では、1 番目のアイテムの `flex-shrink` 係数は 1、2 番目のアイテムは `0` （つまり、まったく縮まない）、3 番目のアイテムは `4` です。したがって、3 番目のアイテムは、1 番目のアイテムよりも急速に縮小します。`flex-grow` と同様に、ここでも小数や大きな数字を使うことができます。最も分かりやすいものを選んでください。 +この例では、最初のアイテムの `flex-shrink` 係数は `1`、 2 つ目のアイテムは `0`（まったく縮小しない）、 3 つ目のアイテムは `4` で、合計の縮小係数は `5` です。したがって、 3 つ目のアイテムは最初のアイテムの約 4 倍の速さで縮小しますが、どちらも `min-content` 幅以下に縮小することはありません。 `flex-grow` と同様に、ここでも小数や大きな数値を使用することができます。 + +```html live-sample___flex-shrink-ratios +
+
One
+
Two
+
Three
+
+``` + +```css live-sample___flex-shrink-ratios +.box > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); + width: 200px; +} + +.box { + display: flex; + width: 500px; + border: 2px dotted rgb(96 139 168); +} + +.one { + flex: 1 1 auto; +} + +.two { + flex: 1 0 auto; +} + +.three { + flex: 2 4 auto; +} +``` -{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}} +{{EmbedLiveSample("flex-shrink-ratios")}} ## フレックスアイテムの寸法の設定をマスターする -フレックスアイテムの寸法の調整の仕組みを理解するには、いくつかの要素を理解する必要があります。このガイドでは、以下の点について説明してきました。 +フレックスアイテムのサイズ調整がどのように動作するのかを理解するには、このガイドで説明した下記の要素を考慮する必要があります。 -## アイテムの基本的な寸法に何が設定されているか +### 何がアイテムの基本的な寸法を決定するか -1. `flex-basis` が `auto` に設定されていて、アイテムに幅が設定されている場合は、その幅に応じた寸法になります。 -2. `flex-basis` が `auto` または `content` （対応しているブラウザーの場合）に設定されている場合は、寸法はアイテムの寸法に基づいて決定されます。 -3. `flex-basis` が長さの単位で、0 ではない場合は、これがアイテムの寸法になります。 -4. `flex-basis` が `0` に設定されている場合は、アイテムの寸法は空間共有の計算には考慮されません。 +- `flex-basis` が `auto` に設定されていて、アイテムに幅が設定されている場合は、その幅に応じた寸法になります。 +- `flex-basis` が `auto` に設定されていて、アイテムの幅が設定されていない場合は、コンテンツのサイズに基づいた寸法になります。 +- `flex-basis` が長さまたはパーセント値の単位で、0 ではない場合は、これがアイテムの寸法になります（`min-content` が下限になります）。 +- `flex-basis` が `0` に設定されている場合は、アイテムの寸法は空間共有の計算には考慮されません。 -### 利用できる余白が残っているか +### 利用できる余白があるか -正の余白がないとアイテムは伸長しませんし、負の余白がないとアイテムは縮小しません。 +アイテムが伸長するのは、正の余白がある場合のみであり、負の余白がないとアイテムは縮小しません。 1. すべてのアイテムの幅（列の場合は高さ）を合計したとき、その合計がコンテナーの幅（または高さ）の合計よりも**小さい**場合は、正の余白があり、`flex-grow` の出番となります。 2. すべてのアイテムの幅（列の場合は高さ）を合計した場合、その合計がコンテナーの幅（または高さ）の合計よりも**大きい**場合は、負の余白があり、`flex-shrink` が効いてきます。 ### 余白を分配する別の方法 -アイテムに余白を追加したくない場合は、「フレックスコンテナー内のアイテムの配置」で説明している配置プロパティを使って、アイテム間やアイテム周辺の余白を処理できることを覚えておいてください。 {{CSSxRef("justify-content")}} プロパティを使用すると、アイテム間やアイテム周辺の余白の分配が可能になります。また、フレックスアイテムに auto のマージンを使用すると、スペースを吸収してアイテム間に隙間を作ることができます。 +アイテムに余白を追加したくない場合は、「フレックスコンテナー内のアイテムの配置」で説明している配置プロパティを使って、アイテム間やアイテム周辺の余白を管理できることを思い出してください。 {{CSSxRef("justify-content")}} プロパティを使用すると、アイテム間やアイテム周辺の余白の分配が可能になります。また、フレックスアイテムに auto のマージンを使用すると、スペースを吸収してアイテム間に隙間を作ることができます。 -自由に使えるフレックスツールがあれば、最初は少し試行錯誤するかもしれませんが、ほとんどの作業が可能であることがわかります。 +これらのフレックスプロパティがすべて利用できるため、最初のうちは少し試行錯誤が必要かもしれませんが、ほとんどのレイアウト課題が可能であることがわかります。 From 10fa13959ad30a039536a1767b8b85842027f0c0 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 29 Nov 2024 21:50:05 +0900 Subject: [PATCH 04/96] =?UTF-8?q?2024/08/30=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0=20(#24726)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 2024/08/30 時点の英語版に基づき更新 * Update index.md * Update index.md --- .../web/css/flex-basis/firefox-flex-basis.png | Bin 6721 -> 0 bytes files/ja/web/css/flex-basis/index.md | 111 +++++++++++++----- 2 files changed, 83 insertions(+), 28 deletions(-) delete mode 100644 files/ja/web/css/flex-basis/firefox-flex-basis.png diff --git a/files/ja/web/css/flex-basis/firefox-flex-basis.png b/files/ja/web/css/flex-basis/firefox-flex-basis.png deleted file mode 100644 index 8e6c0a8d979a204ee9e3f7893162e0481ee943ef..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6721 zcmch6XH-+&)-D!A0YTsuqzEFthTf$}lOjQ?2!!5yCp1OrC?GYVgepjXrI%2oiiF+? z1f&E4LV!(;l#g@o`R+JpjPu?5@BY|h?=|O|W6U-8-p^dmvto61)bEorkP;CQ-Pd@b zqDMq@6G}vMgX-?BYl{#}N&5Om;;Zpem1LdlCZ*tg9{25%Ytuc?7bZSLMAW|jxNczV zSpu((w;hyTDiINVOC&qDBEB9c>1rFOPEF1JAzWl_qx+RLl_uW`8f_t+d1mFjyBIjpvz|mp*u6KkWHqq(tZR{^V%?--QM{AtQB-#n!(DXpnFGjl$K zE{cWPl{G4o5fVWjp_^1?NJK<0rlF!_5IDb+b1%3+jxLIfn_EzzAVzE3w{Aj579VnT zwG=ANMHc_si~iP*kAT><;{xVvNWpW7L<6 zt;~$eoV#BaX~6EW*7FBV+2f1aau&mZ>OAZ_PZ~fr_=v`wORzELh5qT^M@RNP2QIo3 z$iwc*)ykUFLk}mP7I^&>4he0p+<$&531^abUqULqFufUh{JQ|gWv;oQ#QWT!WP71p zD%G8q-Ac|dp*S%yAb{lv6)X^QoF}PXZoN}?`+}`xut%WpN0DcHi!kWu;Xw5hK&V{# zu$AAoE+os)tQkHLSY?keT@a!e5Wioq`4TYD*VESk#y?5P&{y%yHqV7sXdWcV?nWGP z4`-LswmCe_eWStlcGOE2^SPsaWj7WhnQ`EopEv2&y2s-rNVmIS3w2EX}-Bva$ZujVFjOM91gs zOt-=%RiNjdwYT7f)D$wNYcbcGXk#Q72og$%M^M**x$JHY4I1+AOHcH9v#5Rfxt|Ja(?rp)<| z15*s631MSu1|c$x9R1b4C0YJPW4{qTzi0-YbT59evBpSaamgvsUA`YRv)KEBXl8I^ zNzkcV5icl~YHtW_=#<+tQ zO>2Wdb|T$)7?0g(FC^atU{+;pT6~MfE1qZ01PBU)4B56F=LBE@)zqM+$_+o1>;jke zTF+;CqKtSA%@4m13kN1*==$VrOfbj;%HS4=)yzE8M`)>weTH;@90t|)d$?ojEU6^x zIhVVKYp|LEcwI>t@dBuojb&a&(+qfitPM@9 z-VC=XgX=3tT$q{3FWt^OeNQRILd?QE}JOS9b8}X}RanBW`CdZeKWe-FTZ`ZI2)`g5(+o| zgRUJ87fybpYZ!JX*{L|dol_d#q%(0gi5v;D&f9n>SS(yUOSpyKOFAK90%)ayr*qqb zs4SAt2&EyewIIN5z*a=RPe3B2bTgy0Pb*g@<;x?RJ)(@L{8aae!tSv*OLH?49zM(6 zDRsvrwN0Jf{t_Ml2!v{{r>bUEn`W zcM)=X{chiNSQ1orq7~J<1P9A{O|5*O12r7IX>M@XN0R)!^uu}hwK1C-ACC5NBXz&& z2!MXrq|fVqVXsdocD~^N=bGu1c7)XZtPFpRoYh#b{#3(C7uvZE3&?X7!Ef1>eBASc+c!iG}S-~vju97zo)o|Z*0v_5zHovcej!%UZnzdTbqf!+Y6y} zD#U3y0y2NfrX$WLkzF$NW5ITwE(g4MCHtk&x&^vwzWiOMqwj%))epgJ2MjS42WlNx z%ol`ju}<*lm>GrGlDZ<-y1(e71^wrtB^;v7BP-Ga$zZOma2e4RgLA#<`!wq9&CXtb zuetpgaOo4sh!G|BUCHN7b?K}0D8qfFW+{#9|5?l-GiV2Hbq=@rjNVGCEWY?M9Q2LE$K+cBi)*hT*D?}pxnC2_ge*j z?Z=&^>Yx8w?>hDM)^Kh1w8@~Ho?2sQ*Eovq9~87RHF4SMUsAB$2`Tzr(Ph?j_TgT! z@iDJ@C4UyrlPm0`U7GUaUje!mDZ9wMw6gk}VXHj8xVROs2l;;zlX3&?=ge&oOparI ziD9qw0d-TeXU$teZjc@1!Ij4#Sz{~pN*X~rVR5V-+sBIQYKXm2KBBwpjlB@y z?+IA!_-GfuVp;HnIUu`OS#)L%zF>vYH;%4)_7-Eo66Wey*}9Ha@r?p9&p)?x)oLs3Wa)=!&1xt)v zVWo7ldsMXMJ(3$}@x?}dbHbI6bX@=SiT-Z+0Om4mdyv|90qUXb zm+32=->6^m+br@iJ)r5LfgKVh{vnxRzHQASXv`(rUoxCwO4{DWl%+V3{AD*x`p*S& zX%PtxdY7;F;0QQOTb4!yQn9e0iPPk0V ziB;#bM^B8WdtZa^{(D!~R!&w?K!pYD7mjy&Ao**WCR{xs`Hy!xd%mF(G^ue?7<86a ziG(4CcE`D-Z-23Gr(2yEDk?ZCsTvWj@($rC*I;?TD{N?kX0!8w45fu$VF^zC;<*)X z?6yhy^zHSk6TEm78m5RhB}=OPoqh$_K%5V?6^!D~Y^nPv>_P43@gu0hGvUiSj+HDb z-V!L>=9ye3f7Uqh2x{;#Sky^D%6{~oJ@4*l3f$E*(`N!3I}|BhANVDT;qbqz)C84dg>#f;NG$H^weDl(Cx(1GfrC>69H!R@Lha;rqNZ!&-JC_tL~b@0UkcoZnb_nN=w$T*EX}Z2jNAK{rq?R&y5bjj~AIkpGhg{7Y{@Yo)*Uh<7{sE=l|!o6A25#SLuup!7y7 zDU3w0M}hDRZsGR`bt}VbH=s_4(yV7rf!T9bZt2GIBWSgbK0Xf`ANY%CPnx4t=M{eW zhYhvDe3)rk6JqtSsy21pJ>;~$#Ongc{t;CE*5Uxyyn8t(d}(_*;_NRHW>QKMMNfjF zSrHdo+sWc$mmW#khC3WXuH@Q9O?%X{Z7}Tax`V&_YY0l!^GIx5Klb6=+3)n_R5_j4v}++ z0+V;cW5P4Yxyxwid>it2n0r9#Is(!#Vq4%iX;A0d5qJCP3lh5XV(teR`E*@glcj z(pz@F%U^vfrWmt>z?FiAf~jv-G!{2c(Crt@rhIul;d1a`9%quBOFnX(FS^5x*+oq4 zGXc}CdW7Eqy=}PfGL4}p>Q9kto1lsjmuwDu`P=r~8TKkS%u~c{m{uBjpjkf32KQRw zS*PV&spXx%Qi{hs@x4k(g)6mzY3Ovb{H7*>1QJ z75&;B{KQHNMfmZBLn)*(1R6GQ2J7~fIm*QmHF3`3 zd**F*?o1NoR1&x0m8xIMtK5Fl{bX^cL7}vqOK#TP4jiUd%69-N3=|ScUufm~a+kxCz_=IpI zfes5~KE*V`M^?{lERKM$=>7ngXPto}p+3T}1wzfYX>=%nczon5DHu>L5~>lG@l85E zMHJLALIvne<%nU&zNcLvH=Y5cM@)`^=gP#zitZs)fw(_K-fPHEBN`5Lh9WI&+}4s6t@o-Ww-K|x0U*{x5c-d- z*0z^)fy-Vnxl}x7f=Jc(drQpk3fC%IWL1$KrvOw4U$!t+xT1&_?~oS4w`B7$U!%wS zC8C?tQsS6>;Re3@?L7YiO8>sU{d!iSY`R{VZ{}}R5)cO?@bppPNecwPEYRiBdqydlx$}RYZ;Sq#l*KHKBq1u*=OuPWcbNulrev)9rooe#Uwq} zJQ_UI%IhXpO$rNmYzg6z7Z?D!t2TUM*${SVg6%y+wNlK>Rgc8qpj7r-!bgjs6ME9e z#5JAMpdwfefKwig1r_-T;bpi1l~Ji}$iJ?#g^C2$3T8TnSqwbd zpk&{Oh4DdaLxp!|?q}=D-?M9YC<1XfAM*zsyC0)k8Ki+0<_n)9=+jw0zssE<2Lw_P zJyck_E`9C$DMz&&^}IunSjJ0%spj3}2xH9$R5VmY)$jUsu{v8 zAI8OO&aqZMB)4bx-=)<9R{E^|#Jvx?CM3~=L$wzandU5>F@r;lLCj!riPd(eBd4LZ zupm)E$q|~-Li+{DO8Ls>8L-D4RClQ9kjsk(#fA(2xpemreGmE@Tt@ZWogbra-GK$L z3gNXaF_E1}QKx+9qO1|a z(4-mq5Xd$09AJRCv0`v_Lg?|zoxyY^tP)bRsnpM63Mn8(b^Y#v2ZzH%*B_1ABZu+p z$x>bKf=VX3sMKg24D&Dpb)H6F;Mia2TAJ&GKcO0y4gTkpZvP|uq3*k@TBFzT$_|E| zPS@eY*wA}#9GPo&uGe&35jTqla##STWIYA;#w}FqgX?Djv1-=sbL*Tnk47DD#yY1qjQ>c5M5Ts-Aw9@@#e*T@|HzhuA5V#)ub{r$gwmjA>S|F>%R|1Gl0 z6@jk5h*H#=l^nT$tA9UOI`WRyannXD-5+Sj9c5tjQQ6Q*V4O{kD(JvElAR4K2J z+&9Sj24^M{H55*CH$*W~wI$)3dIz!13w!eT<*2r@6|-+%+QB)_7Uq?~wgQu*X1?yYiXtcx&)}^rnr@ao`5sIKIu}RsD%+LpS9&&iDwIoApU{?M* zH6xVeE5GjxO6mG81Y2P)#5~7`Zn?dXOwqDo_Sj@>Q#l9J3cV~A_5dY?j0YDGJD-U> znfX zF^=o~vhs7R-$Kb*27R1W#i`j^SogD}Hkf)_JyrdMuKacY)D=CL=uj&dYL8et zDf<8s#=_0}tZ0W)CBtJN;alDJ3C<2nLp$6g4V*7z?0}o|%EJwvNYgHCDakATdp=lI zpbZ0t%6lkY9EO(!9lI+Syc!+6Lv!{yLfC^T>U)#LR5QbG2U8ghDbkagN+y=TpsaDR znSlvn1f>_6h<(=Z%Kh zx8+;!eo%6M3su+!_)QJl*H^vSKE8`0H_2WxCp3SK+{^TT5dGQ0Teo0cboEY|DcDJq z@rZtNV54?=*`o6TIk#xttaoQk?UA`o>%cx$l%=k=;Tc{?Wqt^ps{x!NvI9!9jd_MP z#wy~NDhO?^M!jhk8l#hUiCdW!zObpP>w>$aS{R)&?;l8@HnVUmqD1HXZ)T%BEGLklV&qynpE#W_pU*|^49;Idi*ERtLauJ=@m&iD4N=jUViHOY==lgRY#@j Ix#j!+0)01-$^ZZW diff --git a/files/ja/web/css/flex-basis/index.md b/files/ja/web/css/flex-basis/index.md index f480f5dd482631..0ef9c534aa1e38 100644 --- a/files/ja/web/css/flex-basis/index.md +++ b/files/ja/web/css/flex-basis/index.md @@ -2,25 +2,22 @@ title: flex-basis slug: Web/CSS/flex-basis l10n: - sourceCommit: 856b52f634b889084869d2ee0b8bb62c084be04d + sourceCommit: c63daf697d8f22ba17d4633f018ad7dfa65e4770 --- {{CSSRef}} -**`flex-basis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。 +**`flex-basis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、{{glossary("flex item","フレックスアイテム")}}の主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。 + +> **メモ:** {{cssxref("flex")}} 一括指定を使用する方が、個別に `flex-grow`、`flex-shrink`、`flex-basis` の宣言を使用するよりも推奨されます。この文書では、一括指定成分の一つである `flex-basis` プロパティについて説明していますので、ここではこれらを別個のものとしています。 {{EmbedInteractiveExample("pages/css/flex-basis.html")}} この例では、3 つすべてのアイテムの {{cssxref("flex-grow")}} と {{cssxref("flex-shrink")}} プロパティがともに `1` に設定されており、フレックスアイテムが初期の `flex-basis` から伸長したり縮小したりできることを示しています。 -このデモでは、最初のアイテムの `flex-basis` を変更します。そして、その `flex-basis` を基準にして伸長したり縮小したりします。つまり、例えば最初のアイテムの `flex-basis` が `200px` の場合、最初は 200px で表示されますが、他のアイテムが最低でも `min-content` の大きさであることを考慮して、利用可能な空間に合わせて縮小されます。 - -下記の図は、 Firefox の [Flexbox インスペクター](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html)がアイテムがどのような寸法になるのかを理解するのに役立つことを示しています。 +このデモでは最初のフレックスアイテムに設定する `flex-basis` 値を変更し、利用できる空間いっぱいに伸長させたり縮小させたりします。他のフレックスアイテムもサイズが変更され、少なくとも `min-content` のサイズになります。例えば、最初のアイテムの `flex-basis` を `200px` に設定すると、始めは `200px` ですが、利用できる空間に合うように縮小されます。 -![Firefox の Flexbox インスペクターでは、アイテムが縮小された後のサイズが表示されます。](firefox-flex-basis.png) - -> [!NOTE] -> (`auto` 以外の) `flex-basis` と `width` (または `flex-direction: column` の場合は `height`) の両方が要素に設定されていた場合、 `flex-basis` が優先されます。 +もし `flex-basis` が `auto` 以外の値に設定されていて、同じフレックスアイテムに `width` （`flex-direction: column` の場合は `height`）が設定されている場合は、`flex-basis` の値が優先されます。 ## 構文 @@ -55,23 +52,16 @@ flex-basis: unset; - : 以下の単位のいずれかです。 - {{cssxref("<length>")}} は絶対的な値を設定します。 - - {{cssxref("<percentage>")}} は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。 - - `auto` は横書きモードでは [width](https://drafts.csswg.org/css2/#the-width-property) の値、縦書きモードでは [height](https://drafts.csswg.org/css2/#the-height-property) の値を使用します。対応する値も `auto` であった場合、代わりに `content` の値が使用されます。 - - `max-content` は幅の内在的な推奨値を設定します。 - - `min-content` は幅の内在的な最小値を設定します。 - - `fit-content` は、現在の要素のコンテンツに基づいて計算された、 `min-content` と `max-content` の値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。 + - {{cssxref("<percentage>")}} は包含ブロックのコンテンツ領域の幅または高さに対する割合を設定します。 `flex-basis` のパーセント値はフレックスコンテナーに対して解決されます。フレックスコンテナーのサイズが不定の場合、 `flex-basis` の使用する値は `content` となります。 + - `auto` は横書きモードでは {{cssxref("width")}} の値、縦書きモードでは {{cssxref("height")}} の値を使用します。対応する値も `auto` であった場合、代わりに `content` の値が使用されます。 + - {{cssxref("max-content")}} は幅の内在的な推奨値を設定します。 + - {{cssxref("min-content")}} は幅の内在的な最小値を設定します。 + - {{cssxref("fit-content")}} は、現在の要素のコンテンツに基づいて計算された、 `min-content` と `max-content` の値で囲まれた、包含ブロックのコンテンツ領域の使用可能な最大サイズを設定します。 - `content` - : フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。 - > [!NOTE] - > この値はフレックスボックスレイアウトの初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) または [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。 - > - > - もともと、`flex-basis:auto` は「自身の `width` または `height` プロパティを参照する」という意味でした。 - > - その後 `flex-basis:auto` の意味が自動拡大縮小設定に変わり、また「自身の `width` または `height` プロパティを参照する」キーワードとして "main-size" を導入しました。これは [Firefox バグ 1032922](https://bugzil.la/1032922) で実装しました。 - > - さらに、この変更が [Firefox バグ 1093316](https://bugzil.la/1093316) で戻されて `auto` が再び「自身の `width` または `height` プロパティを参照する」になり、自動拡大縮小設定を行うための `content` キーワードを新たに導入しました (content キーワードの追加は [Firefox バグ 1105111](https://bugzil.la/1105111) で扱っています)。 - ## 公式定義 {{cssinfo}} @@ -84,11 +74,9 @@ flex-basis: unset; ### フレックスアイテムの初期の寸法の設定 -`flex-basis` の様々な値を設定した例です。 - #### HTML -```html +```html live-sample___setting_flex_item_initial_sizes