CSSフレックスボックス入門：初心者でも分かるレイアウト技術

CSSフレックスボックス入門：初心者でも分かるレイアウト

「レイアウトが思い通りにならない…」「CSSで要素を並べるのが難しい…」このような悩みを持つWeb制作初心者は多いのではないでしょうか。そんな方々に朗報です！今回は、モダンなWebレイアウトの強力な味方、 「フレックスボックス（Flexbox）」について、初心者の方でも理解できるように基礎から解説します。

1. フレックスボックスとは？

フレックスボックスは、CSSの比較的新しいレイアウトモードで、要素を柔軟に配置するための仕組みです。従来のCSSレイアウト技術（floatやposition）と比べて、直感的に要素を配置できるのが特徴です。

フレックスボックスを使うと、以下のようなレイアウトが簡単に実現できます：

横並びや縦並びのレイアウト
等間隔に要素を並べる
中央揃えや端揃えなどの整列
要素のサイズを柔軟に調整
レスポンシブなレイアウト

2. フレックスボックスの基本概念

フレックスボックスを理解するには、いくつかの基本的な概念を押さえる必要があります。

フレックスコンテナとフレックスアイテム

フレックスボックスでは、親要素（フレックスコンテナ）とその子要素（フレックスアイテム）という関係が重要です。

                .container {

                  display: flex; /* この要素がフレックスコンテナになる */

                }

                /* 子要素は自動的にフレックスアイテムになる */

メインとクロスの軸

フレックスボックスには「メイン軸」と「クロス軸」という2つの軸があります。

メイン軸：フレックスアイテムが並ぶ方向の軸
クロス軸：メイン軸に対して垂直な軸

3. フレックスボックスの基本的な使い方

Step 1: フレックスコンテナを作る

まず、要素を並べたい親要素に display: flex; を指定します。

                .container {

                  display: flex;

                }

Step 2: 並べる方向を決める

flex-direction プロパティで並べる方向を指定します。

                .container {

                  display: flex;

                  flex-direction: row; /* 横方向（左から右）に並べる（デフォルト） */

                }

主な値：

row：横方向（左から右）に並べる
row-reverse：横方向（右から左）に並べる
column：縦方向（上から下）に並べる
column-reverse：縦方向（下から上）に並べる

デモ：横並びと縦並び

横並び（row）の例：

Item 1

Item 2

Item 3

縦並び（column）の例：

Item 1

Item 2

Item 3

4. アイテムの配置方法

メイン軸方向の配置：justify-content

justify-content プロパティを使うと、メイン軸（横並びなら横方向）に沿って要素をどのように配置するかを制御できます。

値	説明
flex-start	メイン軸の始点に揃える（デフォルト）
flex-end	メイン軸の終点に揃える
center	メイン軸の中央に揃える
space-between	最初と最後の要素を端に配置し、残りの要素を等間隔に配置
space-around	すべての要素の周りに均等なスペースを配置

flex-start（始点揃え）：

Item 1

Item 2

Item 3

center（中央揃え）：

Item 1

Item 2

Item 3

flex-end（終点揃え）：

Item 1

Item 2

Item 3

space-between（両端揃えで等間隔）：

Item 1

Item 2

Item 3

space-around（均等なスペース）：

Item 1

Item 2

Item 3

クロス軸方向の配置：align-items

align-items プロパティを使うと、クロス軸（横並びなら縦方向）に沿って要素をどのように配置するかを制御できます。

flex-start（クロス軸の始点に揃える）：

Item 1

Item 2

Item 3

center（クロス軸の中央に揃える）：

Item 1

Item 2

Item 3

flex-end（クロス軸の終点に揃える）：

Item 1

Item 2

Item 3

5. アイテムのサイズ調整

flex プロパティ

flex プロパティを使うと、フレックスアイテムの大きさを柔軟に調整できます。これは flex-grow、flex-shrink、flex-basis の3つのプロパティをまとめたショートハンドプロパティです。

                .item {

                  flex: 1; /* 簡易指定 */

                }

アイテムのサイズを変えた例：

flex: 1

flex: 2

flex: 1

ポイント： flex: 1; のようにシンプルに指定すると、余白を均等に分配します。数値が大きいほど、その要素が占める割合が大きくなります。

6. 折り返し設定

flex-wrap プロパティ

flex-wrap プロパティは、要素が1行（または1列）に収まらない場合にどう振る舞うかを制御します。

                .container {

                  display: flex;

                  flex-wrap: wrap; /* 要素が収まらない場合は折り返す */

                }

主な値：

nowrap：折り返さない（デフォルト）
wrap：折り返す
wrap-reverse：逆方向に折り返す

折り返しなし（nowrap）の例：

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

7. よく使うフレックスボックスのパターン

中央揃え（縦横中央に配置）

                .center-container {

                  display: flex;

                  justify-content: center; /* 横方向の中央揃え */

                  align-items: center; /* 縦方向の中央揃え */

                  height: 200px; /* 高さを設定 */

                }

中央に配置

ナビゲーションメニュー

                .nav {

                  display: flex;

                  justify-content: space-between; /* 均等に分散 */

                }

ホーム

サービス

ブログ

お問い合わせ

カードレイアウト

                .card-container {

                  display: flex;

                  flex-wrap: wrap; /* 折り返し */

                  gap: 20px; /* 間隔 */

                }

                .card {

                  flex: 1 0 200px; /* 最小幅200px、伸縮可能 */

                }