Flexboxの基本をマスターしよう！レスポンシブレイアウトの作成方法

2024年9月14日

はじめに

CSSの Flexbox（フレックスボックス） は、ウェブページのレイアウトを効率的に設計するための強力なツールです。Flexboxを使うことで、簡単に要素を整列させたり、スペースを調整したり、レスポンシブなデザインを実現できます。この記事では、Flexboxの基本的な使い方と、レスポンシブレイアウトを作成する方法を解説します。

Flexboxとは？

Flexbox（正式にはFlexible Box Layout）は、CSSのレイアウトモジュールで、要素を親要素内で自動的に並べたり、空間を柔軟に配分したりすることができます。従来のフロートやグリッドレイアウトに比べ、より簡単かつ直感的にレイアウトを組むことができます。

Flexboxの基本用語

コンテナ:
Flexboxを適用する親要素。
アイテム:
コンテナ内の子要素。

Flexboxを使用するには、親要素にdisplay: flex;を指定します。すると、その親要素内のすべての子要素がフレックスアイテムとなり、柔軟なレイアウトの調整が可能になります。

基本的なFlexboxの例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .container {
      display: flex;
      background-color: lightgray;
    }
    .item {
      background-color: lightblue;
      margin: 10px;
      padding: 20px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

この例では、.containerがFlexboxの親要素として設定され、3つの.itemが横並びに配置されます。

Flexboxの基本プロパティ

Flexboxのレイアウトは、主に親要素（コンテナ）に指定するプロパティによって制御されます。以下は、よく使うFlexboxのプロパティです。

1. flex-direction

flex-directionは、アイテムをどの方向に並べるかを指定します。

row:
横方向にアイテムを並べる（デフォルト）。
row-reverse:
横方向の逆順に並べる。
column:
縦方向にアイテムを並べる。
column-reverse:
縦方向の逆順に並べる。

CSS

.container {
  display: flex;
  flex-direction: column;
}

この例では、アイテムが縦方向に並べられます。

2. justify-content

justify-contentは、アイテムを主軸（通常は横方向）に沿ってどう配置するかを指定します。

flex-start:
左寄せ。
flex-end:
右寄せ。
center:
中央揃え。
space-between:
アイテム間に均等なスペースを配置。
space-around:
アイテムの左右に均等なスペースを配置。

CSS

.container {
  display: flex;
  justify-content: space-between;
}

この例では、アイテム間に均等なスペースが配置されます。

3. align-items

align-itemsは、アイテムを交差軸（通常は縦方向）に沿ってどう揃えるかを指定します。

stretch:
高さを均等に引き伸ばす（デフォルト）。
flex-start:
上揃え。
flex-end:
下揃え。
center:
中央揃え。
baseline:
テキストのベースラインに揃える。

CSS

.container {
  display: flex;
  align-items: center;
}

この例では、アイテムが縦方向に中央揃えされます。

4. flex-wrap

flex-wrapは、アイテムがコンテナの幅を超えたときに折り返しをするかどうかを指定します。

nowrap:
折り返しなし（デフォルト）。
wrap:
折り返して次の行に配置。
wrap-reverse:
折り返しを逆方向に行う。

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

この設定により、アイテムがコンテナ内に収まらない場合、次の行に折り返されます。

アイテムに適用するプロパティ

アイテム（子要素）にも、Flexbox特有のプロパティを適用することで、柔軟な配置を行うことができます。

1. flex-grow

flex-growは、アイテムが余分なスペースをどの程度拡大して埋めるかを指定します。

CSS

.item {
  flex-grow: 1;
}

この例では、すべてのアイテムが均等にスペースを埋めるように拡大されます。

2. flex-shrink

flex-shrinkは、コンテナが小さくなったときにアイテムがどれだけ縮むかを指定します。

CSS

.item {
  flex-shrink: 2;
}

この例では、他のアイテムよりも2倍縮小するよう指定されています。

3. flex-basis

flex-basisは、アイテムの初期サイズを指定します。widthやheightと似ていますが、Flexboxに特化したサイズ指定です。

CSS

.item {
  flex-basis: 200px;
}

この設定により、アイテムの幅は200pxに設定されます。

レスポンシブデザインにFlexboxを活用する

Flexboxは、レスポンシブデザインを簡単に実現するための強力なツールです。画面サイズに応じて要素を並べ替えたり、アイテムを折り返したりすることで、どんなデバイスでも見やすいレイアウトを作成できます。

レスポンシブレイアウトの例

以下は、Flexboxを使ってレスポンシブなグリッドレイアウトを作成する例です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .item {
      background-color: lightblue;
      margin: 10px;
      padding: 20px;
      flex-basis: calc(33.333% - 20px);
    }

    @media (max-width: 800px) {
      .item {
        flex-basis: calc(50% - 20px);
      }
    }

    @media (max-width: 500px) {
      .item {
        flex-basis: calc(100% - 20px);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>