Flexboxの使い方(折り返し, 横並び, 縦並び)

2022/11/26

Flexboxの「基本的な概念」「各プロパティの使い方」について解説します。各プロパティごとにCODEPENでサンプルソースを作っています。ソースを編集しながら動きを確認してみてください。

FlexコンテナとFlexアイテム

Flexコンテナ という親要素が、複数の Flexアイテム を子要素として持ちます。
FlexコンテナとFlexアイテムで設定するプロパティが異なります。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

上記でいうと、 containerクラスが親要素、 itemクラスが子要素になります。
親要素のcontainerクラスに display:flex を定義してFlexコンテナにしてみます。

See the Pen Flex_parent1 by waku-waku (@raku-raku) on CodePen.

Flexコンテナで使うプロパティ

flex-wrap｜折り返し

「子要素の合計幅」が「親要素の幅」を超えて複数行になる場合の折り返し設定ができます。

設定	説明
nowrap(デフォルト)	幅が収まるように縮小して、折り返さない
wrap	はみ出たものは下に折り返す
wrap-reverse	はみ出たものは上に折り返す

See the Pen Flex_parent_flex-wrap by waku-waku (@raku-raku) on CodePen.

flex-direction｜並べる方向

Flexアイテムを並べる方向を設定できます。

設定	説明
row(デフォルト)	左から右へ、上から下へ
row-reverse	右から左へ、上から下へ
column	上から下へ、左から右へ
column-reverse	下から上へ、左から右へ

See the Pen Flex_parent_flex-direction by waku-waku (@raku-raku) on CodePen.

justify-content｜横の位置揃え

横方向にスペースがあるときの位置揃えを設定できます。
(flex-directionで横配置を指定)

設定	説明
flex-start(デフォルト)	左揃え
flex-end	右揃え
center	中央
space-between	間隔空け(両端の隙間なし)
space-around	間隔空け(両端の隙間あり)

See the Pen Flex_parent_justify-content by waku-waku (@raku-raku) on CodePen.

align-content｜複数行での行間隔

複数行になったときの行間隔を設定できます。

設定	説明
stretch(デフォルト)
flex-start	上揃え
flex-end	下揃え
center	中央
space-between	間隔空け(両端の隙間なし)
space-around	間隔空け(両端の隙間あり)