基本知識

【CSS第6回】Flexboxで並列レイアウトを作る

CSS基礎講座 全10回（第6回）

【CSS第6回】Flexboxで並列レイアウトを作る

現代のWeb制作におけるレイアウトのデファクトスタンダード（標準技術）である「Flexbox（フレックスボックス）」を極めます。要素を自在に横並び・縦並びさせ、均等配置やセンタリングをコード1行で行うテクニックを学習しましょう。

📌 CSS講座ロードマップ一覧（クリックで移動）

1. Flexboxとは？親と子の役割

Flexbox (Flexible Box Layout) とは、複雑な位置調整や整列、折り返しを簡単に行える、レスポンシブデザインに欠かせないレイアウト手法です。

Flexboxは、枠組みとなる**「親要素（フレックスコンテナ）」**と、その中に並ぶ**「子要素（フレックスアイテム）」**という明確な親子関係で機能します。横並びにしたい子要素たちを、`display: flex;` を指定した親要素で包み込むのが基本的な使い方です。

Flexboxレイアウト軸解説図 図：Flexboxにおける親コンテナの主軸（横方向）と交差軸（縦方向）

2. 要素の並び方を操る最重要プロパティ

`display: flex;` を親に宣言した上で、以下のプロパティを親要素に指定して子要素たちの配置ルールを設定します。

① justify-content（主軸方向の配置）

子要素が並ぶ方向（通常は横方向）の揃え位置を指定します。

  • flex-start (初期値): 左揃え（端に寄せる）
  • center: 中央揃え（簡単に左右中央配置ができる）
  • flex-end: 右揃え
  • space-between: 両端を揃え、中間の要素を均等な間隔で配置する（ナビゲーション等に多用）
  • space-around: 各要素の左右に均等なスペースを空けて配置する

② align-items（交差軸方向の配置）

子要素と交差する方向（通常は縦方向）の揃え位置を指定します。

  • stretch (初期値): 親要素の高さ一杯に子要素を引き伸ばす
  • center: 上下方向の中央に配置する（上下のセンタリングが瞬時に可能）
  • flex-start / flex-end: 上揃え / 下揃え

3. Flexboxの魔法：完璧な上下左右センタリング

かつてWebレイアウトで最も難しかった「要素を親要素のど真ん中（上下左右の中央）に置く」という処理は、Flexboxを使えば親要素にわずか3行のコードを書くだけで完全に実現します。

👑 完璧な中央揃えの3行コード

display: flex;
justify-content: center; /* 左右中央 */
align-items: center;     /* 上下中央 */

4. ナビゲーションメニューを並べてみよう

以下のCSSを指定するだけで、縦に並んでいたリストメニューが、両端揃えで綺麗に整列された横並びのナビゲーションヘッダーになります。

style.css 
.nav-container {
    display: flex;               /* 親要素をフレックス化 */
    justify-content: space-between; /* 左右両端に割り振る */
    align-items: center;         /* 上下中央揃えにする */
    background-color: #ffffff;
    padding: 16px 24px;
}

.nav-menu-list {
    display: flex;               /* リストタグ同士も横並び化 */
    gap: 20px;                    /* 要素同士のスキマを20px空ける */
    list-style: none;
    margin: 0;
    padding: 0;
}
✍️ 第6回 理解度チェック（問題）

Flexboxにおいて、子要素を「横並びにした状態で、両端揃えで等間隔に配置する」ために使用するjustify-contentプロパティの値は何でしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第6回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • Flexboxは、親要素に `display: flex;` を適用することで、子要素たちを制御する。
  • `justify-content` は横方向（主軸）の整列、`align-items` は縦方向（交差軸）の整列を制御する。
  • `space-between` は両端揃え、`center` の組み合わせで簡単に上下左右中央配置ができる。

次回（第7回）は、フレックスボックスと対をなす超強力な2次元レイアウト手法「Grid Layoutで自由な表組み」を学習します。お楽しみに！

📖 CSSの基礎を全10回でマスターする

🔑 第6回 理解度チェックの解答と解説

【解説】

正解は **`space-between`** です。 `justify-content: space-between;` を指定すると、最初の子要素がコンテナの左端（開始地点）に固定され、最後の子要素が右端（終了地点）に固定され、その間にある他の要素たちが均等な空白を挟んで自動配列されます。ヘッダーの「ロゴを左に、メニューリストを右に」といった配置を作る際の超定番の記述方法です。

関連記事