Flexboxの使い方

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コンテナにしてみます。

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

flex-wrap|折り返し

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

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

flex-direction|並べる方向

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

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

justify-content|横の位置揃え

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

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

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

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

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

align-items|Flexアイテムを並べる軸

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

設定 説明
stretch(デフォルト)
flex-start 上揃え
flex-end 下揃え
center boxの高さで中央揃え
baseline テキストのラインで中央揃え

Flexアイテムで使うプロパティ

order|表示順

表示順を設定できます。デフォルトは0で小さいもの順です。

flex-grow|伸びる長さの比率

空いたスペース分だけ、伸びる長さの比率を設定できます。 デフォルトは0 です。
1つのflexアイテムだけに flex-grow: 1; と定義すると、空いたスペースを全て、定義したflexアイテムで利用できます。

flex-shrink|縮む長さの比率

スペースが不足したとき、縮む長さの比率を設定できます。 デフォルトは1 です。

flex-basis|ベース幅

width同様に、ベース幅を設定できます。 デフォルトはauto です。

flex|grow, shrink, basis

flex-grow、flex-shrink、flex-basisをまとめて設定できます。
デフォルトは、 0 1 auto となります。

align-self|位置揃え

align-itemsより優先して、位置揃えを設定できます。