CSS Flexbox 完全チートシート【日本語・2026年最新版】≪フレックスボックス≫

🎯 重要な概念：軸（Axis）

Flexboxを理解する上で最も重要な概念が「軸」です。Flexboxは主軸（Main Axis）と交差軸（Cross Axis）の2つの軸で動作します。これらの軸の方向と関係を理解することで、Flexboxの動作を完全に把握できます。

主軸（Main Axis）は、アイテムが配置される主要な方向を示します。flex-directionプロパティで制御され、デフォルトでは水平方向（左から右）です。主軸方向の配置はjustify-contentで制御します。

交差軸（Cross Axis）は、主軸に垂直な方向を示します。交差軸方向の配置はalign-items（単一行の場合）やalign-content（複数行の場合）で制御します。

display

display: flex | inline-flex;

このプロパティは、要素をFlexboxコンテナとして定義するために使用します。Flexboxの機能を使うには、まず親要素にこのプロパティを設定する必要があります。

flex：ブロックレベルのFlexboxコンテナを作成します。通常のブロック要素と同様に、幅いっぱいに広がり、次の要素は下に配置されます。一般的に最もよく使用される値です。

inline-flex：インラインレベルのFlexboxコンテナを作成します。インライン要素と同様に、コンテンツの幅だけを占有し、横に並べて配置できます。テキストの流れの中にFlexboxコンテナを配置したい場合に便利です。

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

このプロパティは、Flexboxコンテナ内のアイテムが配置される主軸（メイン軸）の方向を決定します。デフォルト値はrowで、アイテムは左から右に水平に配置されます。

row（デフォルト）：アイテムを左から右へ水平に配置します。通常のテキストの読み方向と同じです。

row-reverse：アイテムを右から左へ水平に配置します。視覚的な順序が逆になりますが、DOMの順序は変わりません。

column：アイテムを上から下へ垂直に配置します。縦方向のレイアウトに適しています。

column-reverse：アイテムを下から上へ垂直に配置します。視覚的な順序が逆になります。

💡 ヒント：flex-directionを変更すると、justify-contentとalign-itemsの効果も方向に応じて変わります。例えば、columnの場合、justify-contentは垂直方向、align-itemsは水平方向を制御します。

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

このプロパティは、Flexboxコンテナ内のアイテムがコンテナの幅（または高さ）を超えた場合に、次の行（または列）に折り返すかどうかを制御します。デフォルト値はnowrapで、アイテムは折り返されずに1行（または1列）に収めようとします。

nowrap（デフォルト）：アイテムは折り返されず、1行（または1列）に配置されます。コンテナのサイズを超える場合、アイテムは縮小されるか、はみ出します。レスポンシブデザインでは、この設定によりアイテムが小さくなりすぎる可能性があるため注意が必要です。

wrap：アイテムがコンテナの幅（または高さ）を超える場合、次の行（または列）に折り返します。レスポンシブなグリッドレイアウトを作成する際に非常に便利です。

wrap-reverse：アイテムを折り返しますが、折り返しの方向が逆になります。例えば、row方向の場合、通常は下に折り返されますが、wrap-reverseでは上に折り返されます。

💡 ヒント：flex-wrap: wrapを使用する場合、align-contentプロパティで複数行の配置を制御できます。また、gapプロパティと組み合わせることで、アイテム間の間隔を簡単に設定できます。

flex-flow

flex-flow: <flex-direction> || <flex-wrap>;

このプロパティは、flex-directionとflex-wrapの2つのプロパティを1つにまとめたショートハンド（短縮記法）です。コードを簡潔に書くことができ、両方のプロパティを同時に設定する際に便利です。

値は、flex-directionの値とflex-wrapの値を順番に指定します。どちらか一方だけを指定することも可能です。例えば、flex-flow: row wrap;と書くことで、flex-direction: row;とflex-wrap: wrap;を同時に設定できます。

💡 ヒント：個別のプロパティを分けて書くこともできますが、ショートハンドを使うことでコードがより読みやすくなります。ただし、デバッグ時には個別のプロパティの方が問題を特定しやすい場合もあります。

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

このプロパティは、Flexboxコンテナ内のアイテムを主軸（メイン軸）方向にどのように配置するかを制御します。主軸はflex-directionで設定された方向です。デフォルト値はflex-startで、アイテムは主軸の開始位置に配置されます。

flex-start：アイテムを主軸の開始位置（左端または上端）に配置します。デフォルト値です。

flex-end：アイテムを主軸の終了位置（右端または下端）に配置します。

center：アイテムを主軸の中央に配置します。単一のアイテムを中央揃えする際によく使用されます。

space-between：最初のアイテムは開始位置、最後のアイテムは終了位置に配置し、その間のアイテムは均等に間隔を空けて配置します。両端には余白がなく、アイテム間のみに間隔ができます。

space-around：各アイテムの周囲に均等な余白を配置します。最初と最後のアイテムの外側にも余白ができますが、アイテム間の余白の半分のサイズになります。

space-evenly：すべてのアイテム間、および最初と最後のアイテムの外側に均等な余白を配置します。最も均等な間隔を実現できます。

💡 実用例：justify-content: centerとalign-items: centerを組み合わせることで、要素を完全に中央揃えできます。モーダルウィンドウやローディングスピナーの配置に最適です。

align-items

align-items: flex-start | flex-end | center | baseline | stretch;

このプロパティは、Flexboxコンテナ内のアイテムを交差軸（クロス軸）方向にどのように配置するかを制御します。交差軸は主軸に垂直な方向です。デフォルト値はstretchで、アイテムは交差軸方向に引き伸ばされます。

flex-start：アイテムを交差軸の開始位置に配置します。主軸がrowの場合、アイテムは上端に揃います。

flex-end：アイテムを交差軸の終了位置に配置します。主軸がrowの場合、アイテムは下端に揃います。

center：アイテムを交差軸の中央に配置します。異なる高さのアイテムを中央揃えする際に便利です。

baseline：アイテムをベースライン（テキストの基準線）で揃えます。テキストのサイズやフォントが異なるアイテムを、テキストのベースラインで整列させたい場合に使用します。フォントサイズが異なるナビゲーションメニューなどで有効です。

stretch（デフォルト）：アイテムを交差軸方向に引き伸ばして、コンテナの高さ（または幅）いっぱいに広げます。ただし、アイテムに明示的な高さ（または幅）が設定されている場合は、そのサイズが優先されます。

💡 注意点：align-itemsは単一行のFlexboxアイテムの配置を制御します。複数行がある場合は、align-contentプロパティを使用してください。

align-content

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;

このプロパティは、flex-wrap: wrapによって複数行（または複数列）に折り返されたFlexboxアイテムの行全体を、交差軸方向にどのように配置するかを制御します。デフォルト値はstretchです。

⚠️ 重要な前提条件：このプロパティが効果を発揮するには、flex-wrap: wrap（またはwrap-reverse）が設定されている必要があります。また、コンテナの交差軸方向のサイズが、すべての行を収容するのに十分な大きさである必要があります。

flex-start：すべての行を交差軸の開始位置に配置します。

flex-end：すべての行を交差軸の終了位置に配置します。

center：すべての行を交差軸の中央に配置します。

space-between：最初の行は開始位置、最後の行は終了位置に配置し、その間の行は均等に間隔を空けて配置します。

space-around：各行の周囲に均等な余白を配置します。

space-evenly：すべての行間、および最初と最後の行の外側に均等な余白を配置します。

stretch（デフォルト）：各行を引き伸ばして、利用可能なスペースを埋めます。

💡 違いの理解：align-itemsは各行内の個々のアイテムの配置を制御し、align-contentは複数行全体の配置を制御します。両方を組み合わせることで、より細かい制御が可能になります。

gap / row-gap / column-gap

gap: <row-gap> <column-gap>?;
row-gap: <length>;
column-gap: <length>;

これらのプロパティは、Flexboxコンテナ内のアイテム間の間隔を設定します。CSS Grid Layoutでも使用されるプロパティで、Flexboxにも適用されました（比較的新しい仕様です）。従来のmarginを使った方法と比べて、より直感的で保守しやすいコードを書けます。

gap：行間隔（row-gap）と列間隔（column-gap）を同時に設定するショートハンドです。1つの値のみを指定した場合、行間隔と列間隔の両方に適用されます。2つの値を指定した場合、最初の値が行間隔、2番目の値が列間隔になります。

row-gap：行間（交差軸方向）の間隔を設定します。flex-direction: rowの場合、これは垂直方向の間隔になります。

column-gap：列間（主軸方向）の間隔を設定します。flex-direction: rowの場合、これは水平方向の間隔になります。

💡 メリット：gapを使用することで、最初と最後のアイテムの外側には余白ができず、アイテム間のみに間隔ができます。これはmarginを使った方法では実現が難しい動作です。また、flex-wrap: wrapと組み合わせることで、折り返された行間にも適切な間隔を設定できます。

⚠️ ブラウザ対応：古いブラウザでは対応していない場合があります。必要に応じて、marginをフォールバックとして使用することを検討してください。

flex-grow

flex-grow: <number>; /* デフォルト: 0 */

このプロパティは、Flexboxコンテナ内に余白がある場合に、そのアイテムがどのくらい拡張するかを指定します。デフォルト値は0で、アイテムは拡張されません。正の数値を指定することで、その値に比例して余白が分配されます。

動作の仕組み：すべてのアイテムのflex-growの値を合計し、各アイテムのflex-growの値をその合計で割った割合で余白が分配されます。例えば、3つのアイテムがそれぞれflex-grow: 1の場合、余白は均等に3分割されます。1つがflex-grow: 2で他がflex-grow: 1の場合、余白は2:1:1の比率で分配されます。

使用例：サイドバーとメインコンテンツのレイアウトで、メインコンテンツをflex-grow: 1に設定することで、利用可能なスペースをすべて占有させることができます。カードレイアウトで等幅のカードを作成する際にも便利です。

💡 ヒント：flex-growは、アイテムの最小サイズ（flex-basisやコンテンツのサイズ）を超えて拡張する場合にのみ作用します。アイテムが既にコンテナのサイズを超えている場合は、flex-shrinkが作用します。

flex-shrink

flex-shrink: <number>; /* デフォルト: 1 */

このプロパティは、Flexboxコンテナ内のスペースが不足する場合に、そのアイテムがどのくらい縮小するかを指定します。デフォルト値は1で、アイテムは必要に応じて縮小されます。0を指定すると、そのアイテムは縮小されません。

動作の仕組み：すべてのアイテムのflex-shrinkの値とflex-basis（または幅）の積を合計し、各アイテムの縮小量を計算します。flex-shrink: 0のアイテムは縮小されず、他のアイテムが縮小します。値が大きいほど、より多く縮小されます。

使用例：固定幅のサイドバーを作成する場合、flex-shrink: 0を設定することで、サイドバーが縮小されずに指定した幅を維持できます。ロゴやアイコンなど、常に一定のサイズを保ちたい要素にも有効です。

💡 ヒント：flex-shrinkは、アイテムのサイズがコンテナのサイズを超える場合にのみ作用します。flex-wrap: wrapが設定されている場合、アイテムは縮小される代わりに折り返される可能性があります。

flex-basis

flex-basis: <length> | auto | content; /* デフォルト: auto */

このプロパティは、Flexboxアイテムの初期サイズ（主軸方向のサイズ）を指定します。flex-growやflex-shrinkが作用する前の、アイテムの基準となるサイズです。デフォルト値はautoで、アイテムの幅（または高さ）が使用されます。

auto（デフォルト）：アイテムのwidth（またはheight）プロパティの値が使用されます。明示的に設定されていない場合は、コンテンツのサイズが使用されます。

content：アイテムのコンテンツのサイズに基づいて初期サイズが決定されます。autoと似ていますが、widthやheightの値は無視されます。

長さの値（px, em, %, など）：明示的なサイズを指定します。パーセンテージを使用する場合、親要素（Flexboxコンテナ）のサイズに対する割合で指定します。

💡 重要な理解：flex-basisは「希望するサイズ」であり、必ずしも最終的なサイズではありません。flex-growやflex-shrink、コンテナのサイズによって、最終的なサイズは調整されます。また、flex-basis: 0を設定すると、アイテムのコンテンツサイズを無視して、flex-growの値に基づいてサイズが分配されます。

flex

flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>];

このプロパティは、flex-grow、flex-shrink、flex-basisの3つのプロパティを1つにまとめたショートハンドです。最もよく使用されるFlexboxプロパティの1つで、コードを簡潔に書くことができます。

よく使われる値：

• flex: 1：flex-grow: 1、flex-shrink: 1、flex-basis: 0%と同等です。アイテムが利用可能なスペースを均等に分配します。
• flex: 0 1 auto：デフォルト値です。アイテムは拡張せず、必要に応じて縮小します。
• flex: none：flex-grow: 0、flex-shrink: 0、flex-basis: autoと同等です。アイテムは拡張も縮小もせず、コンテンツサイズを維持します。
• flex: 2 1 100px：拡張率2、縮小率1、初期サイズ100pxを指定します。

💡 実践的な使い方：カードレイアウトで等幅のカードを作成する場合、各カードにflex: 1を設定します。固定幅のサイドバーと可変幅のメインコンテンツを作成する場合、サイドバーにflex: 0 0 200px（拡張なし、縮小なし、200px固定）、メインコンテンツにflex: 1を設定します。

align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch;

このプロパティは、個別のFlexboxアイテムの交差軸方向の配置を、コンテナのalign-itemsプロパティで設定された値を上書きします。特定のアイテムだけを異なる位置に配置したい場合に使用します。デフォルト値はautoで、親要素のalign-itemsの値が継承されます。

auto（デフォルト）：親要素のalign-itemsの値が適用されます。

flex-start / flex-end / center / baseline / stretch：これらの値はalign-itemsと同じ意味を持ちますが、このアイテムにのみ適用されます。

💡 使用例：ナビゲーションバーで、ほとんどのアイテムを中央揃えにしつつ、ロゴだけを上端に配置したい場合、ロゴにalign-self: flex-startを設定します。カードレイアウトで、特定のカードだけを異なる位置に配置する際にも便利です。

order

order: <integer>; /* デフォルト: 0 */

このプロパティは、Flexboxアイテムの視覚的な表示順序を変更します。デフォルト値は0で、DOMの順序通りに表示されます。正の値や負の値を指定することで、アイテムの表示順序を変更できます。

動作の仕組み：orderの値が小さいアイテムほど先に表示され、値が大きいアイテムほど後に表示されます。同じ値の場合は、DOMの順序が優先されます。負の値も使用でき、order: -1はorder: 0より前に表示されます。

⚠️ 重要な注意点：orderは視覚的な順序のみを変更します。DOMの順序や、スクリーンリーダーなどの支援技術が読み取る順序は変わりません。アクセシビリティの観点から、重要なコンテンツの順序を変更する際は注意が必要です。

💡 使用例：レスポンシブデザインで、モバイル表示時に特定の要素を先頭に移動させたい場合に便利です。また、カードレイアウトで、特定のカードを強調表示するために先頭に配置する際にも使用できます。

中央揃え（水平・垂直）

要素を完全に中央揃えするのは、従来のCSSでは難しい作業でしたが、Flexboxを使えば非常に簡単に実現できます。モーダルウィンドウ、ローディングスピナー、エラーメッセージの表示など、様々な場面で使用される一般的なパターンです。

💡 ポイント：justify-content: centerで主軸方向（通常は水平方向）の中央揃え、align-items: centerで交差軸方向（通常は垂直方向）の中央揃えを実現します。コンテナに高さを設定することを忘れないでください。

カードレイアウト（等幅・レスポンシブ）

Flexboxを使用することで、レスポンシブなカードレイアウトを簡単に作成できます。画面サイズに応じて、カードの数が自動的に調整され、常に適切なレイアウトを維持します。商品一覧、ブログ記事の一覧、ポートフォリオなど、様々な場面で使用されるパターンです。

💡 ポイント：flex: 1 1 200pxにより、各カードは最小200pxの幅を保ちつつ、利用可能なスペースを均等に分配します。min-width: 0は、長いテキストがカードからはみ出るのを防ぐために重要です。画面幅が狭くなると、カードは自動的に次の行に折り返されます。

ナビゲーションバー

Flexboxは、ナビゲーションバーの作成に最適です。ロゴを左側に、ナビゲーションリンクを右側に配置する、一般的なレイアウトパターンを簡単に実現できます。従来のfloatを使った方法と比べて、よりシンプルで保守しやすいコードになります。

💡 ポイント：justify-content: space-betweenにより、ロゴとナビゲーションリンクが自動的に両端に配置されます。ナビゲーションリンク自体もFlexboxコンテナにして、gapプロパティで間隔を設定することで、marginを使わずにきれいに配置できます。

サイドバー + メインコンテンツ

固定幅のサイドバーと可変幅のメインコンテンツを配置する、Webサイトでよく見られるレイアウトパターンです。Flexboxを使用することで、サイドバーは常に一定の幅を保ち、メインコンテンツは残りのスペースを自動的に占有します。

💡 ポイント：サイドバーにflex: 0 0 200pxを設定することで、拡張も縮小もせず、常に200pxの幅を維持します。メインコンテンツにflex: 1を設定することで、利用可能なすべてのスペースを占有します。align-items: flex-startにより、サイドバーとメインコンテンツの高さが異なる場合でも、上端で揃えることができます。

💡 応用：このパターンを応用して、左右両方にサイドバーを配置したり、メインコンテンツを中央に配置したりすることも可能です。レスポンシブデザインでは、flex-wrap: wrapと組み合わせることで、画面幅が狭い場合にサイドバーを下に移動させることもできます。