CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。
要素を横並びで配置したいときなど、前まではfloatなどを使ってレイアウトを組む方法が一般的でしたが、
今ではFlexboxを使って要素を横並びに配置する方法がよく使われるようになっています。
初めての方は、少し難しいと感じるかもしれません。

そこで、今回はCSS Flexboxの使い方を実践を交えて、ご紹介したいと思います。

Flexboxの基本

CSS Flexboxは、コンテナ（親要素）とアイテム（子要素）という2つの要素によって、構成されています。
Flexboxレイアウトを使用する場合には、CSSファイルで親要素（コンテナ）にdisplay:flex;を指定します。
インライン要素に使う場合は、containerに  display: inline-flex;を指定します。

See the Pen
PoYJEqV by ibis kawai (@moge_penguin)
on CodePen.

Flexboxで細かくレイアウトを調整する時には、コンテナとアイテムにそれぞれプロパティを指定して調整を行います。
では、コンテナとアイテムに指定できるそれぞれのプロパティについて詳しくご説明していきます。

コンテナ（親要素）に使用できるプロパティ

01：flex-direction [アイテムの配置方向]

flex-direction:row（デフォルト）[左→右]

アイテムを左から右へと配置

See the Pen
flex-direction: row by ibis kawai (@moge_penguin)
on CodePen.

flex-direction:row-reverse [左←右]

アイテムを右から左へと配置

See the Pen
RwbLMEy by ibis kawai (@moge_penguin)
on CodePen.

flex-direction:column [上→下]

アイテムを上から下へと配置

See the Pen
flex-direction: column by ibis kawai (@moge_penguin)
on CodePen.

flex-direction:column-reverse [上←下]

アイテムを下から上へと配置

See the Pen
flex-direction: column-reverse by ibis kawai (@moge_penguin)
on CodePen.

02：flex-wrap(アイテムの折り返し)

flex-wrap:nowrap（デフォルト）[折り返さない]

アイテムを折り返さずに、一列に配置します。

See the Pen
flex-wrap:nowrap by ibis kawai (@moge_penguin)
on CodePen.

flex-wrap:wrap [折り返えす 上→下]

アイテムを折り返して複数行に上から下に並べます。

See the Pen
flex-wrap:wrap by ibis kawai (@moge_penguin)
on CodePen.

flex-wrap:wrap-reverse [折り返えす 上←下]

アイテムを折り返して、複数行に下から上に並べます。

See the Pen
flex-wrap:wrap-reverse by ibis kawai (@moge_penguin)
on CodePen.

flex-flow [配置方向・折り返し一括指定]

上記のflex-direction と flex-wrap を一括で設定するプロパティです。

.container{
flex-flow: {flex-directionの値} {flex-wrapの値};
}

See the Pen
PoYJaKG by ibis kawai (@moge_penguin)
on CodePen.

03：justify-content [横向きのアイテムの揃え方]

justify-content: flex-start（デフォルト）[左揃え]

アイテムを左揃えで表示します。

See the Pen
justify-content: flex-start by ibis kawai (@moge_penguin)
on CodePen.

justify-content: flex-end [右揃え]

アイテムを右揃えで表示します。

See the Pen
justify-content: flex-end by ibis kawai (@moge_penguin)
on CodePen.

justify-content: center [真ん中揃え]

アイテムを真ん中揃えで表示します。

See the Pen
justify-content: center by ibis kawai (@moge_penguin)
on CodePen.

justify-content: space-between [両端均等揃え]

両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置します。

See the Pen
justify-content: space-between by ibis kawai (@moge_penguin)
on CodePen.

justify-content: space-around [均等揃え]

両端のアイテムも含めて、均等な間隔を空けて配置します。

See the Pen
justify-content: space-around by ibis kawai (@moge_penguin)
on CodePen.

04：align-items [縦方向の揃え方]

align-items: stretch（デフォルト）[上下余白：埋める]

アイテムの上下の余白を埋めるように配置します。

See the Pen
align-items: stretch by ibis kawai (@moge_penguin)
on CodePen.

align-items: flex-start [上揃え]

アイテムを上揃えで配置します。

See the Pen
mdbqeQX by ibis kawai (@moge_penguin)
on CodePen.

align-items: flex-end [下揃え]

アイテムを下揃えで配置します。

See the Pen
align-items: flex-end by ibis kawai (@moge_penguin)
on CodePen.

align-items: center [上下中央揃え]

アイテムを上下中央揃えで配置します。

See the Pen
align-items: center by ibis kawai (@moge_penguin)
on CodePen.

align-items: baseline [文字のベースライン揃え]

アイテムを文字のベースラインに合わせて配置します。

See the Pen
align-items: baseline by ibis kawai (@moge_penguin)
on CodePen.

05：align-content [複数行の縦方向の揃え方]

align-content: stretch（デフォルト）[余白埋める]

アイテムの行が余白を埋めるように配置されます。

See the Pen
align-content: stretch by ibis kawai (@moge_penguin)
on CodePen.

align-content: flex-start [上揃え]

アイテムの行が上揃えで配置されます。

See the Pen
align-content: flex-start by ibis kawai (@moge_penguin)
on CodePen.

align-content: flex-end [下揃え]

アイテムの行が下揃えで配置されます。

See the Pen
align-content: flex-end by ibis kawai (@moge_penguin)
on CodePen.

align-content: space-between [均等配置]

縦方向に均等に配置されます。

See the Pen
align-content: space-between by ibis kawai (@moge_penguin)
on CodePen.

align-content: space-around [両端スペースも均等配置]

縦方向に均等に配置され、両端のスペースも均等に配置されます。

See the Pen
align-content: space-around by ibis kawai (@moge_penguin)
on CodePen.

アイテムに使用できるプロパティ一覧

01：order [並び順]

初期値は0で、マイナスも使えます。
同じ数字の時は、先に書かれているものが前に並びます。

See the Pen
order: 0 by ibis kawai (@moge_penguin)
on CodePen.

02：flex-grow [伸び方の比率]

コンテナ内のアイテムの伸び方の比率を指定するプロパティです。小数点も使えます。
アイテムの横幅の合計がコンテナより短く余白がある場合、 flex-growプロパティの指定に応じた比率でアイテムが自動的に伸ばされて余白が埋められます。

See the Pen
flex-grow:0 by ibis kawai (@moge_penguin)
on CodePen.

03：flex-shrink [縮み方の比率]

flex-growプロパティとは逆に、アイテムの縮み方の比率を指定する際に使用します。
コンテナ内に収まるように、各アイテムが縮められて自動調整されます。
例えば、flex-shrink:1;を指定したアイテムよりも、flex-shrink:4;を指定したアイテムの方が4倍縮められます。小数点も使えます。

See the Pen
flex-shrink by ibis kawai (@moge_penguin)
on CodePen.

04： flex-basis [アイテムの基本幅]

flex-basisは、アイテムの基本幅を指定するプロパティです。
[%][px]で指定します。上記と同じく、数値がコンテナ内より大きくなってもコンテナ内に収まります。

See the Pen
flex-basis by ibis kawai (@moge_penguin)
on CodePen.

05：flex [アイテムの幅まとめて指定]

flex-grow・flex-shrink・flex-basisの3つの値をまとめて指定するプロパティです。
各プロパティの値を半角スペース区切りで指定します。（初期値は0 1 auto）

initial「0 1 auto」と同じ。フレックスアイテムは伸びない/縮む。
auto「1 1 auto」と同じ。フレックスアイテムは伸びる/縮む。
none「0 0 auto」と同じ。フレックスアイテムは伸びない/縮まない。

See the Pen
flex by ibis kawai (@moge_penguin)
on CodePen.

06：align-self [個別アイテムの縦方向の揃え位置]

auto（デフォルト）

親要素のalign-itemsの値を使用

flex-start

アイテムを上揃えで配置

flex-end

アイテムを下揃えで配置

center

アイテムを中央揃えで配置

baseline

アイテムを文字のベースラインに合わせて配置

stretch

アイテムを上下の余白を埋めるように配置

See the Pen
align-self by ibis kawai (@moge_penguin)
on CodePen.

Flexboxが学べるサイト