Flexboxの完全ガイド

  • 358 ビュー
  • 9分の読み物
ハディ・バハドリ
  • 2024年5月9日
0 株式
0
0
0
0
0
株式
0
0
0
0

導入

CSS Flexboxレイアウトの包括的なガイドです。この包括的なガイドでは、Flexboxのすべてを解説し、親要素（Flexコンテナ）と子要素（Flexアイテム）に使用可能な様々な属性に焦点を当てています。また、Flexboxの歴史、デモ、テンプレート、ブラウザサポート表も含まれています。.

コンテクスト

Flexbox レイアウト モジュール (2017 年 10 月の W3C 候補勧告) は、アイテムのサイズが不明または動的な場合でも、コンテナー内のアイテム間のスペースを配置、整列、配分するためのより効率的な方法を提供することを目的としています (そのため、「flex」という単語が使用されています)。.

フレキシブルレイアウトの根底にある考え方は、コンテナがアイテムの幅と高さ（および順序）を変更し、利用可能なスペースを最大限に活用できるようにすることです（主に、さまざまな表示デバイスや画面サイズに対応するためです）。フレキシブルコンテナは、利用可能な空きスペースを埋めるためにアイテムを拡大したり、オーバーフローを防ぐために縮小したりします。.

最も重要なのは、フレックスボックスレイアウトは通常のレイアウト（水平レイアウトに基づいて垂直方向に整列し、インラインで表示されるブロック）とは異なり、方向性があるということです。フレックスボックスレイアウトはページには適していますが、大規模または複雑なアプリケーション（特に向きの変更、サイズ変更、伸縮など）をサポートするには柔軟性が欠けています（言葉遊びではありません）。.

注: Flexbox レイアウトはアプリケーション コンポーネントや小規模レイアウトに適していますが、グリッド レイアウトは大規模なレイアウトに適しています。.

基礎と用語

フレックスボックスは単一の機能ではなく完全なモジュールであるため、プロパティセット全体を含め、多くの要素が含まれています。プロパティの中には、コンテナ（親要素、「フレックスコンテナ」と呼ばれる）に設定するものもあれば、子要素（「フレックスアイテム」と呼ばれる）に設定するものもあります。.

「通常」レイアウトがブロックフローとインラインフローの両方の方向に基づいているのに対し、フレキシブルレイアウトは「フレキシブルフロー」に基づいています。この仕様書をご覧いただくと、フレックスレイアウトの基本的な考え方が説明されています。.

https://css-tricks.com/wp-content/uploads/2018/11/00-basic-terminology.svg
アイテムは、主軸 (主開始から主終了まで) または交差軸 (交差開始から交差終了まで) に沿って配置されます。.

  • 主軸 – フレックスコンテナの主軸は、フレックスアイテムを配置する主な軸です。必ずしも水平方向である必要はないので注意してください。主軸はflex-directionプロパティ（下記参照）に依存します。.
  • メイン スタート | メイン エンド – フレキシブル アイテムは、メイン スタートからメイン エンドまでコンテナー内に配置されます。.
  • 元のサイズ – フレックスアイテムの幅または高さ（元の寸法に含まれる方）が、アイテムの元のサイズとなります。フレックスアイテムの元のサイズプロパティは、「幅」または「高さ」のいずれか（元の寸法に含まれる方）となります。.
  • 交差軸 – 主軸に垂直な軸を交差軸と呼びます。交差軸の方向は主軸の方向に依存します。.
  • クロス スタート | クロス エンド – フレックス ラインはアイテムで埋められ、フレックス コンテナーのクロス スタート側から始まり、クロス エンドに向かってコンテナー内に配置されます。.
  • クロスサイズ – フレックスアイテムの幅または高さ（クロスディメンションに含まれる方）が、アイテムのクロスサイズとなります。クロスサイズプロパティは、クロスディメンションに含まれる「幅」または「高さ」のいずれかの値となります。.

フレックスボックスの機能

https://css-tricks.com/wp-content/uploads/2018/10/01-container.svg親のためのプロパティ
（容器）

画面

これはフレキシブルコンテナを定義します。指定された値に応じて、インラインまたはブロックになります。すべての直接の子要素にフレキシブルなコンテキストを提供します。.

.container {
display: flex; /* or inline-flex */
}
フレックス方向

https://css-tricks.com/wp-content/uploads/2018/10/flex-direction.svg
これにより主軸が作成され、フレックスコンテナ内でのフレックスアイテムの配置方向が決まります。フレックスボックス（オプションの折り返しを除く）は、一方向レイアウトの概念です。フレックスアイテムは、主に水平方向の行または垂直方向の列に配置されます。.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}
  • ROW（デフォルト）: ltrでは左から右、rtlでは右から左
  • row-reverse: ltr では右から左、rtl では左から右
  • 列: 行と同様ですが、上から下へ
  • 列反転: 行の反転と同様ですが、下から上へ
フレックスラップ

https://css-tricks.com/wp-content/uploads/2018/10/flex-wrap.svg
デフォルトでは、フレキシブルアイテムはすべて1行に収まるように配置されます。必要に応じて、このプロパティを使用してアイテムを閉じるように変更することができます。.

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap (デフォルト): すべてのフレックスアイテムが1行に折り返されます
  • wrap: フレキシブルなアイテムは上から下まで複数の行に折り返されます。.
  • wrap-reverse: フレキシブル アイテムは、下から上に向かって複数の行に折り返されます。.
フレックスフロー

これは、flex-directionプロパティとflex-widthプロパティのショートハンドです。これらのプロパティを組み合わせることで、フレックスコンテナの主軸と交差軸を指定できます。デフォルト値はrow nowrapです。.

.container {
flex-flow: column wrap;
}
コンテンツの両端揃え

https://css-tricks.com/wp-content/uploads/2018/10/justify-content.svg
これは、主軸に沿った配置を指定します。行内のすべてのフレキシブルアイテムが非フレキシブル、またはフレキシブルだが最大サイズに達している場合に、余分な空白を分配するのに役立ちます。また、アイテムが行からはみ出している場合のアイテムの配置をある程度制御することもできます。.

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
  • flex-start (デフォルト): 項目はフレックス方向の開始に向かって詰め込まれます。.
  • flex-end: アイテムはフレックス方向の終わりに向かってパッケージ化されます。.
  • START: 項目は、書き込みモード方向の開始に向かって詰められます。.
  • END: 項目は書き込みモード方向の終わりに向かってパックされます。.
  • LEFT: アイテムはコンテナーの左端に向かってパックされます。フレックス方向と意味をなさない場合は、start のように動作します。.
  • 右: アイテムはコンテナーの右端に向かって詰め込まれます。その方向に柔軟に対応する必要がある場合を除いて、端のように動作します。.
  • CENTER: 項目は線の中央に配置されます。
  • Space-Between: アイテムはライン上に均等に配置されます。最初のアイテムはスタートラインに、最後のアイテムはフィニッシュラインに配置されます。
  • 周囲間隔: アイテムは均等に配置され、周囲に均等な間隔が確保されます。ただし、すべてのアイテムの両側に均等な間隔が確保されているため、視覚的には均等な間隔ではないことに注意してください。最初のアイテムはコンテナの端に1単位の間隔を確保しますが、次のアイテムには独自の間隔が適用されるため、次のアイテムとの間には2単位の間隔が確保されます。.
  • 均等空間: アイテムは、任意の 2 つのアイテム間の距離 (および端までの距離) が等しくなるように分散されます。.

これらの値と組み合わせることができるキーワードが2つあります。safeとinsecureです。safeを使用すると、どのような配置方法であっても、要素がページから大きく外れて（例えばページ上部から外れて）スクロールできなくなる（いわゆる「データ損失」）のを防ぐことができます。.

アイテムの配置

https://css-tricks.com/wp-content/uploads/2018/10/align-items.svg
これは、現在の行の交差軸に沿ってフレキシブルアイテムを配置する際のデフォルトの動作を定義します。交差軸（主軸に垂直）のコンテンツ配置バージョンと考えてください。.

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
  • STREtch (デフォルト): コンテナを埋めるように引き伸ばします (最小/最大幅は考慮されます)
  • flex-start / start / self-start: アイテムは交差軸の始点に配置されます。これらの違いは微妙で、flexの方向ルールまたは書字方向ルールを尊重するかどうかによって異なります。.
  • flex-end / end / self-end: アイテムは交差軸の端に配置されます。この違いも微妙で、flexの方向のルールと書字方向のルールを尊重するかどうかの違いです。.
  • 中央: アイテムは交差軸上に配置されます
  • ベースライン: アイテムはベースラインと同じように配置されます
ALalign-コンテンツ

https://css-tricks.com/wp-content/uploads/2018/10/align-content.svg
交差軸に余分なスペースがある場合は、justify-content がメイン軸上で個々の項目を揃えるのと同様に、フレキシブル コンテナーの行を内部に揃えます。.

.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
  • 通常 (デフォルト): 値が設定されていない場合と同様に、項目はデフォルトの位置に詰められます。.
  • flex-start / start: コンテナーの先頭に折り返される項目。flex-start (より多くのサポートあり) はフレックス方向を示し、start は書き込みモードの方向を尊重します。.
  • flex-end / end: コンテナの端に折り返される項目。(より多くのサポート) flex-end は flex の方向を示し、end は書き込みモードの方向を尊重します。.
  • CENTER: コンテナの中央にあるアイテム
  • Space-Between: アイテム間の間隔は均等です。最初の行はコンテナの先頭に、最後の行はコンテナの末尾に配置されます。
  • スペースアラウンド: アイテムは各行の周囲に等間隔で均等に配置されます。
  • 均等配置: アイテムは均等に配置され、周囲に均等なスペースが確保されます
  • ストレッチ: 残りのスペースを占めるように行が引き伸ばされます。
ギャップ、行ギャップ、列ギャップ

https://css-tricks.com/wp-content/uploads/2021/09/gap-1.svg
gapプロパティは、フレキシブルアイテム間の間隔を明示的に制御します。この間隔はアイテム間にのみ適用され、外側の端には適用されません。.

.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}

この動作は、ガターが何らかの理由で大きい場合 ( justify-content: space-between; などにより)、そのスペースが小さくなった場合にのみこのギャップが影響するという、最小限のガターリングと考えることができます。.

これはフレックスボックスに限定されず、ギャップはグリッドや複数列のレイアウトでも機能します。.

フレックスボックスプレフィックス

Flexboxは、可能な限り多くのブラウザに対応するために、いくつかのベンダープレフィックスを必要とします。これは、単に属性にベンダープレフィックスを付加するだけでなく、プロパティ名と値を完全に異なるものにする必要があることを意味します。これは、Flexboxの仕様が時間の経過とともに変更され、「旧バージョン」「トゥイナーバージョン」「新バージョン」が生まれてきたためです。.

おそらく、これに対処する最善の方法は、新しい (そして最終的な) 構文を使用して記述し、バックスペースを有効活用する Autoprefixer を通じて CSS を実行することです。.

あるいは、プレフィックスの補助として Sass @mixin があります。これにより、どのようなことをすればよいかがわかります。

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val; 
-moz-box-ordinal-group: $val; 
-ms-flex-order: $val; 
-webkit-order: $val; 
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}

例

まずは、ごくシンプルな例から始めましょう。ほぼ日常的な問題、つまり完璧なフォーカスを実現するという問題です。Flexboxを使えば、これほど簡単なことはありません。.

<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}

これは、フレキシブルコンテナの自動設定マージンが余分なスペースを吸収するという事実によるものです。そのため、自動設定マージンを設定すると、アイテムは両方の軸で完全に中央に配置されます。.

では、もう少しプロパティを使ってみましょう。6つのアイテムからなるリストを考えてみましょう。これらのアイテムはすべて固定サイズですが、自動サイズ調整が可能です。ブラウザのサイズを変更してもメディアリクエストなしですべてが適切に拡大・縮小されるように、アイテムを水平方向に均等に配置する必要があります。.

.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction 
and if we allow the items to wrap 
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}

完了です。残りはスタイルに関する問題です。以下にペンの例を示します。CodePen にアクセスしてウィンドウのサイズを変更し、何が起こるか確認してください。.

別の例を試してみましょう。ウェブサイトの上部に右揃えのナビゲーション要素があるとして、中サイズの画面では中央に、小型デバイスでは1列に表示したいとします。これは非常にシンプルです。.

/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}

フレキシブルアイテムの柔軟性を活かして、もっと良いものを試してみましょう！モバイルファーストの3列レイアウトで、ヘッダーとフッターを全幅に広げてみてはいかがでしょうか。ソースの順序は関係ありません。.

<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
.wrapper {
display: flex;
flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}

/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}

 

この記事の内容:
,
投稿者:
フォローする
コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
次の記事
あなたも気に入るかもしれない