【CSS】Flexboxを使って要素を配置しよう

コンテンツが横並びになっているレイアウトを作る時に、どのようなCSSを書きますか？
昔は「float」を使ったレイアウトが主流でした。
しかしここ数年では、「Flexbox」や「Grid Layout」を使ったレイアウトが主流になってきています。
今回は、簡単で便利なFlexboxについてご紹介します。

Flexboxとは？

Flexboxは、Flexコンテナと呼ばれる親要素と、Flexアイテムと呼ばれる子要素によって構成されています。

HTMLでは以下のようなイメージです。

親要素にdisplay: flex;を指定すると、flexboxが適用されて横並びになります。

子要素がインライン要素の場合は、display: inlne-flex;を指定してください。

単純な横並びだとこれでOKなのですが、Flexboxは細かい配置を指定することができます。
順に見ていきましょう。

親要素（Flexコンテナ）で使えるプロパティ

親要素にdisplay:flexを指定したうえで、同じ親要素に指定できるプロパティです。

flex-directionプロパティ

子要素が並ぶ順番を指定します。

flex-direction: row (初期値)

子要素は左から右に並びます。

flex-direction: row-reverse

子要素は右から左に並びます。
子要素の幅の合計＜親要素の幅の場合は、右端から並びます。

flex-direction: column

子要素は上から下に並びます。

flex-direction: column-reverse

子要素は下から上に並びます。
子要素の高さの合計＜親要素の高さの場合は、下端から並びます。

flex-wrapプロパティ

子要素の幅の合計＞親要素の幅になった際に、子要素を折り返さずに一列で並べるか、折り返して複数行に並べるかどうかを指定します。

flex-wrap:nowrap (初期値)

子要素を折り返さず、一列で並びます。

flex-wrap:wrap

子要素を折り返して、複数行にわたって上から下に並びます。

flex-wrap:wrap-reverse

子要素を折り返して、複数行に渡って下から上に並びます。

flex-flowプロパティ

flex-directionプロパティとflex-wrapプロパティをまとめて指定できます。

justify-contentプロパティ

子要素の幅の合計＜親要素の幅の時に、子要素の水平方向の位置を指定します。

justify-content:flex-start(初期値)

子要素は左揃えで並びます。

justify-content:flex-end

子要素は右揃えで並びます。

justify-content:center

子要素は中央揃えで並びます。

justify-content:space-between

最初と最後の子要素が親要素の両端に配置され、残りの子要素は均等に並びます。

justify-content:space-around

両端を含めたすべての子要素が均等に並びます。

align-itemsプロパティ

子要素の高さの最大値＜親要素の高さの時に、子要素の垂直方向の位置を指定します。

align-items:stretch(初期値)

親要素の高さに合わせて、子要素の高さが設定され並びます。

align-items:flex-start

子要素の高さはそのままで、上揃えで並びます。

align-items: flex-end

子要素の高さはそのままで、下揃えで並びます。

align-items: center

子要素の高さはそのままで、中央揃えで並びます。

align-items: baseline

子要素の高さはそのままで、ベースラインで並びます。

【補足】align-itemsを使用する際の注意

※align-items使用時に子要素にmin-heightを指定すると、IEでは効かなくなってしまいます。
IEも想定して子要素の高さを指定する場合は、heightを使用するようにしてください。

align-contentプロパティ

子要素が複数に渡った時の、垂直方向の位置を指定します。

stretch（初期値）

親要素の高さに合わせて、上下に広がった状態で並びます。

flex-start

子要素は複数行に渡って、上揃えで並びます。

flex-end

子要素は複数行に渡って、下揃えで並びます。

center

子要素は複数行に渡って、中央揃えで並びます。

space-between

最初と最後の子要素が親要素の上下端に配置され、残りの子要素は均等に並びます。

space-around

上下端を含めたすべての子要素が均等に並びます。

子要素（Flexアイテム）で使えるプロパティ

親要素にdisplay:flexを指定したうえで、子要素に指定できるプロパティです。

orderプロパティ

子要素の並び順を指定することができます。
子要素それぞれに指定することで、番号の若い順に並びます。
初期値は0です。マイナスの数値を指定することもできます。

flex-growプロパティ

親要素の大きさ＞子要素の大きさの合計で余白がある時に、子要素それぞれの伸び方を比率で指定することができます。
初期値は0です。マイナス指定はできません。

flex-shrinkプロパティ

flex-growとは逆で、子要素の大きさの合計＞親要素の大きさの時に、子要素それぞれの縮み方を比率で指定することができます。
初期値は0です。マイナス指定はできません。

flex-basisプロパティ

子要素の幅や高さを決めることができます。
子要素が横並びの時は幅を指定することができ、子要素が縦並びの時は高さを指定することができます。
（※並び方の指定は、親要素にflex-directionの値を指定することで実現できます）
flexboxは、flex-directionで指定する以外では縦横の考え方がありません。
見た目としてはwidthやheightを指定するのと変わりませんが、flex-basisはflex-directionの並び方によって、縦横いずれかの大きさを決められると覚えておいてください。
初期値はautoです。

flexプロパティ

flex-grow、flex-shrink、flex-basisの3つのプロパティをまとめてで指定することができます。
初期値は flex-grow:0、flex-shrink:1、flex-basis:autoです。

align-selfプロパティ

子要素それぞれの、垂直方向の揃え方を指定することができます。
値の種類はalign-itemsと同じですが、子要素ごとに個別に指定できるのが便利です。
親要素でalign-itemsを指定済みの状態で子要素にalign-selfを指定した場合は、子要素のalign-selfが優先されます。

※autoは親要素の高さに合わせられ、stretchは子要素が伸ばされて揃えられます。

まとめ

flexboxのプロパティは親要素と子要素の記述だけで完結できるので記述量も少なく、floatよりもスッキリとしたコーディングができます。
さらに種類が豊富でやれることも多いので、把握しておけば活用の幅も広がります。ぜひご活用ください。