Flexboxの使い方についてまとめてみた！

WEB制作

Flexbox（フレックスボックス）の使い方まとめ

一見便利そうで、実際には少しややこしい…そんなCSSの「Flexbox（フレックスボックス）」について、使い方をわかりやすく整理しました。

Flexboxの基本的な考え方

Flexboxは、要素を効率よく並べたいときに使えるCSSのレイアウト手法です。特に「横並び」にしたい場面でよく使われます。

使うときはまず、並べたい子要素（item）を一つの親要素（コンテナ：container）の中にまとめておくのが基本です。

なぜFlexboxはややこしいのか？

理由1：親と子、どちらに何を設定するのか迷う

以下のように使い分けると考えやすくなります。

  • 要素全体の並びを制御したいとき → 親要素（コンテナ）に設定
    例：子要素を等間隔で並べたい場合など

  • 個別の要素の動きを調整したいとき → 子要素（アイテム）に設定
    例：特定の子だけ大きさを変える、位置を調整するなど

理由2：設定できるプロパティの種類が多い

これはもう「慣れ」も必要ですが、順を追って見ていけば理解しやすくなります。

①Flexboxの基本指定方法

基本のHTML（例）

html
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

ここでは、ulがコンテナ、liがアイテムです。

コンテナにFlexを適用する

  • ブロック要素として使いたいとき

    css
    ul {
    display: flex;
    }

  • インライン要素として使いたいとき

    css
    ul {
    display: inline-flex;
    }

    要素の並び方向：flex-direction

    • 横並び（左→右）※デフォルト

      css
      ul {
      display: flex;
      flex-direction: row;
      }

    • 横並び（右→左）

      css
      ul {
      display: flex;
      flex-direction: row-reverse;
      }

    • 縦並び（上→下）

      css
      ul {
      display: flex;
      flex-direction: column;
      }

    • 縦並び（下→上）

      css
      ul {
      display: flex;
      flex-direction: column-reverse;
      }

    要素の折り返し：flex-wrap

    • 折り返さない（デフォルト）

      css
      ul {
      display: flex;
      flex-wrap: nowrap;
      }
      li {
      width: 40%;
      }

    • 折り返す

      css
      ul {
      display: flex;
      flex-wrap: wrap;
      }
      li {
      width: 40%;
      }

    • 逆方向に折り返す

      css
      ul {
      display: flex;
      flex-wrap: wrap-reverse;
      }
      li {
      width: 40%;
      }

    並び順と折り返しを一括で指定：flex-flow

    flex-directionとflex-wrapは、flex-flowでまとめて書くことができます。

    css
    ul {
    display: flex;
    flex-flow: row-reverse wrap;
    }
    li {
    width: 40%;
    }

    ②justify-contentを使う（要素の横方向の揃え方を設定：）

    justify-contentプロパティを使うと、Flexboxの横方向（主軸）における要素の並び方や間隔を調整できます。

    要素を先頭に揃える（左寄せ）

    css
    ul {
    display: flex;
    justify-content: flex-start;
    }

    • デフォルトの状態です。

    • 子要素は左側に詰めて並び、右側に余白ができます。

     

    要素を末尾に揃える（右寄せ）

    css
    ul {
    display: flex;
    justify-content: flex-end;
    }

    • 子要素は右側に寄せて並び、左側に余白ができます。

    要素を中央に揃える

    css
    ul {
    display: flex;
    justify-content: center;
    }

    • 子要素が中央に寄せて並びます。

    • 左右の余白は同じになります。

    両端に配置し、間を等間隔に空ける

    css
    ul {
    display: flex;
    justify-content: space-between;
    }

    • 最初の要素は左端、最後の要素は右端に配置。

    • 残りの要素は等間隔で配置されます。

    要素の左右にも均等な余白をつける（space-around）

    css
    ul {
    display: flex;
    justify-content: space-around;
    }

    • 要素の両側に均等な余白が入ります。

    • 結果として、要素間の余白は2倍になります。

    要素間の余白を完全に均等にする（space-evenly）

    css
    ul {
    display: flex;
    justify-content: space-evenly;
    }

    • 要素間、そして左右の余白すべてが均等になります。

    このように、justify-contentを使うことで、要素の配置や余白の取り方を自由に調整できます。

    ③align-contentを使う（要素の縦方向の揃え方を設定）

    align-contentプロパティを使うと、複数行に折り返された要素同士の縦方向（交差軸）の位置や間隔を調整できます。
    ※このプロパティは複数行のコンテンツ（wrapされた状態）で有効です。

    要素を縦に引き伸ばす（stretch）

    css
    ul {
    display: flex;
    align-content: stretch;
    }

    • デフォルトの設定です。

    • コンテナ全体の高さに合わせて、各行が引き伸ばされます。

    要素を上端に揃える（flex-start）

    css
    ul {
    display: flex;
    align-content: flex-start;
    }

    • 要素全体が上寄せで配置されます。

    要素を下端に揃える（flex-end）

    css
    ul {
    display: flex;
    align-content: flex-end;
    }

    • 要素全体が下寄せで配置されます。

    要素を縦方向に中央揃えにする（center）

    css
    ul {
    display: flex;
    align-content: center;
    }

    • 複数行の要素が、上下中央にまとまって配置されます。

    上下に等間隔で配置する（space-between）

    css
    ul {
    display: flex;
    align-content: space-between;
    }

    • 最初と最後の行がそれぞれ上下の端に配置され、残りの行が等間隔に並びます。

    行の間を等分に空ける①（space-around）

    css
    ul {
    display: flex;
    align-content: space-around;
    }

    • 行の前後に均等な余白が入り、結果として要素間の余白は2倍になります。

    行の間を等分に空ける②（space-evenly）

    css
    ul {
    display: flex;
    align-content: space-evenly;
    }

    • 行間・上下の余白すべてが均等になります。

    補足：space-around　と　space-evenly の違いは？

    ↑このように、スペースの計算方法が少し異なります。

    ちなみに、align-contentとjustify-contentをまとめて指定できます：place-content

    2つのプロパティを1行で書けるショートハンドがplace-contentです。

    css
    ul {
    display: flex;
    place-content:
    stretch space-between;
    }
    /* 上がalign-content、下がjustify-contentの値 */

    ④align-itemsを使う（アイテム同士の縦方向の揃え方を設定）

     

    align-itemsを使うと、各アイテムの高さ方向の揃え方を一括で制御できます。
    以下のようなHTMLを例に考えていきます。

    html
    <ul>
    <li>1</li>
    <li>2<br>2</li>
    <li>3<br>3<br>3</li>
    </ul>

    要素の高さを引き伸ばす（stretch）

    css
    ul {
    display: flex;
    align-items: stretch;
    }

    • デフォルトの値。

    • 各アイテムの高さが、最も高いアイテムに合わせて引き伸ばされます。

    要素を上端に揃える（flex-start）

    css
    ul {
    display: flex;
    align-items: flex-start;
    }

    • 各アイテムの上端が揃います。

    要素を下端に揃える（flex-end）

    css
    ul {
    display: flex;
    align-items: flex-end;
    }

    • 各アイテムの下端が揃います。

    要素を中央揃えにする（center）

    css
    ul {
    display: flex;
    align-items: center;
    }

    • 各アイテムが高さ方向の中央に揃います。

    テキストのベースラインで揃える（baseline）

    css
    ul {
    display: flex;
    align-items: baseline;
    }

    • 各アイテム内のテキストのベースラインが揃います。

       

      いかがでしたか？flexboxをこれから使う方にとって参考にしていただければ幸いです。