CSSのFlexbox実装ガイド｜配置・折り返し・縮小と7つのレイアウト例

Flexboxを使っても、カードがはみ出す、幅がそろわない、縦にすると中央配置がずれる、といった問題は起こります。プロパティを追加する前に、親子の関係、並ぶ軸、残りの空間、内容の最小サイズを確認すると、必要な指定を切り分けられます。

この記事は、制作会社の実装担当とHTML/CSSを学ぶ方に向けたガイドです。基本の8項目と7つのレイアウト例から、配置・折り返し・縮小・順序を確認できます。例の数値は練習用の設定であり、すべてのデザインに合う値ではありません。

1. FlexboxとGridは、そろえたい関係から選ぶ

Flexboxは一つの軸に沿って要素を並べ、空間を分けるレイアウトです。Gridは行と列の関係を扱います。どちらもカードやナビに利用できるため、「ナビなら必ずFlexbox」「Gridは固定件数しか使えない」と用途を決めつけず、複数行の列をそろえたいか、内容に応じた並びを優先するかで選びます。

先に読む順番と、変えられる寸法を決める

デザインから、読む順番、カードの許容幅、間隔、折り返す条件を整理します。長い名前、画像なし、件数が増えた状態も想定してください。Flexboxだけでレイアウト問題の何割が解決する、という根拠のない値では方式を選びません。ページ全体をGrid、部品内をFlexboxにするなど併用できます。

MDNのFlexbox基本概念は一次元の配置と軸、直接の子を説明しています。画面上の左右・上下だけで軸を固定せず、方向と書字方向を含めて確認します。

2. 親と直接の子、主軸と交差軸を確認する

親へdisplay:flexを指定すると、その直接の子がflex itemになります。間にラッパーがある場合は、孫要素が同じ親のitemになるとは限りません。開発者ツールで親のdisplayと子の構造を照合します。

<div class="example-row">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

.example-row {
  display: flex;
  gap: 1rem;
}

通常の横書き・左から右のページならrowの主軸は横方向です。columnへ変えると主軸も変わるため、justify-contentとalign-itemsを「横用・縦用」の固定機能として覚えないようにします。前者は主軸方向の配置、後者は交差軸方向の整列を確認する入口です。

3. 親へ指定する5項目を、別の役割として扱う

flex-directionは並ぶ方向、flex-wrapは折り返し、gapは項目間の間隔です。justify-contentとalign-itemsは空間と整列を扱います。間隔を均等にしたいことと、カード自体の幅を同じにしたいことは別なので、space-betweenだけで等幅になるとは考えません。

align-items:stretchも、子に交差軸の固定寸法などがあれば期待どおりに伸びない場合があります。複数行の行全体を配置する問題は、各itemの整列とは分けて調べます。gapは項目間であり、コンテナ外側の余白はpaddingやmarginで別に設計します。

「カード一覧だから必ずwrap」と一律にせず、一行のナビ、意図した横スクロール、折り返す一覧を区別します。対応するブラウザーも案件の確認対象で検証し、全端末完全対応という保証にはしません。

4. 子へ指定する3項目と、内容の最小サイズを見る

flex-grow、flex-shrink、flex-basisは、余った空間の分配、足りない空間の縮小、計算の出発点を扱います。flex:1 1 300pxの300pxは基本サイズで、最小幅300pxを保証する指定ではありません。

shrinkが同じでも、減る幅が同じとは限らない

縮小の配分には基準となるサイズも関わるため、flex-shrink:1を「すべて同じピクセルだけ縮む」と説明できません。内容や最小サイズにも制約されます。flex-shrinkの仕様説明と、公開要素の実寸を合わせて確認します。

長いURLや画像が押し広げる場合は、itemのmin-width、文章の折り返し、画像の寸法を調べます。下のmin-width:0は縮められるようにする例ですが、文字を切ればよいという意味ではありません。画像や文字がその内側で読めるかも確認します。

.example-card {
  flex: 1 1 300px;
  min-width: 0;
  overflow-wrap: anywhere;
}

5. 実務で使う7つの配置例と、採用前の確認

以下はそれぞれ独立した練習用の例です。クラスを対象のHTMLに合わせて使い、全例をbodyや共通部品へ一括で追加しないでください。CSSを取得できたのに効かない問題は、新規の追加CSSの反映診断で保存と適用を調べられます。

例1：枠の中へ中央配置する

.example-center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 20rem;
}

中央へ置く空間があることを確認します。長い文章や画面より大きい内容も中央へ押し込むのではなく、読める高さとスクロールを設計します。

例2：ロゴとナビを配置する

.example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

狭幅でロゴとリンクが収まらない場合は、ナビの形や改行を検討します。space-betweenだけでスマホメニューの操作が完成するわけではありません。

例3：カードを折り返す

.example-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.example-cards > * {
  flex: 1 1 18rem;
  min-width: 0;
}

最終行の少数カードが広がることも確認します。各行で列の幅をそろえたいならGridも候補です。長い文字や画像を入れて、gapも含めた実寸を見ます。

例4：本文とサイドバーを分ける

.example-layout { display: flex; gap: 2rem; }
.example-sidebar { flex: 0 0 16rem; }
.example-main { flex: 1; min-width: 0; }
@media (max-width: 50rem) {
  .example-layout { flex-direction: column; }
  .example-sidebar { flex-basis: auto; }
}

columnへ変わった後も横幅用のbasisを残すと、主軸の高さに作用する場合があります。数値は例で、内容が収まらなくなる幅から実際の切替位置を決めます。

例5：短いページでもフッターを下へ置く

.example-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.example-page > main { flex: 1; }

通常フローで短い本文の残り空間をmainへ割り当てる例です。画面上へ重ねるposition:fixedのフッターとは異なります。スマホのブラウザーUIや長い本文でも確認します。

例6：見た目の順序を変える場合

.example-a { order: 2; }
.example-b { order: 1; }

orderは見た目の順序で、HTMLの意味や読み上げ・通常のキーボード移動の順番を自動で入れ替えません。orderの注意点を確認し、読む順番を修正したいならHTMLの構造から検討します。

例7：空間を分けた等幅の候補

.example-equal { display: flex; gap: 1rem; }
.example-equal > * { flex: 1; min-width: 0; }

内容の最小サイズや余白の条件によって幅が影響されます。等幅という意図が実際に保たれるか、長短の文字と画像、狭幅でも測ります。

6. レスポンシブは折り返しと読む順番を一緒に考える

広い画面で並べることだけでなく、狭い画面で何を先に読むか、どの情報を一緒に比較するかを整理します。wrapで折り返せても、非常に長い単語や固定幅の内側要素が残れば、はみ出しが起こり得ます。wrapを付けるだけの修正と、読みやすい完成状態を区別してください。

画面を狭めた順と広げた順で、文字と画像、行の並びが意図どおりか確認します。表示上の並び替えが必要な場合は、キーボード移動や読み上げとの食い違いも確認します。設計全体はレスポンシブ実装の手順へ接続し、この記事ではFlexboxの判定に集中します。

7. WordPressの保存先と、公開の表示を検収する

試験コードがブラウザーで動いたことと、WordPressの正しい保存先へ反映したことは別です。テーマ、本文のブロック、追加CSS、独自の出力を調べ、次の担当が更新する場所へ変更を置きます。子テーマと変更の保持も合わせて、親の更新で残る範囲を整理できます。

件数と文字量が変わる状態も試す

PC/SPと切替幅の前後で、短い/長い見出し、画像なし、件数が増えた一覧、メニューとフォームの操作を確認します。コード例の見た目だけで本番へ適用せず、対象のデザインとHTMLで再現します。変更前、差分、戻し方、確認URLと幅を残すと検収の条件を共有できます。

8. Acquaへ依頼する範囲と、完成状態

企業の担当者は企業向けWeb制作・運用へ、困るURL、端末、期待する並び、実際のはみ出しを伝えられます。原因をFlexboxと決めつけず、読者が困る表示や操作から整理します。

制作会社は実装支援の案内へ、PC/SPデザイン、内容が増える条件、既存HTML/CSS、変更可能な保存先、検収と公開担当を共有してください。必要なレイアウト修正とWordPress反映、公開確認を範囲として相談できます。

完成状態は、必要な情報が各幅で読め、操作と読む順番が整い、次の担当が変更場所と差分・戻し方を説明できることです。相談窓口には、困る画面と希望する状態を分かる範囲で伝えてください。特定の工数や成功率は一律に約束しません。