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