flexboxで横並びのレイアウト

2021年5月12日 2021年5月13日 8分3秒

1 基本的な使い方
2 配置方向の設定
3 折り返しの設定
4 水平方向の設定
5 垂直方向の設定
6 垂直方向（高さを揃える）の設定

基本的な使い方

CSSで、「display: flex;」を設定することで横並びにレイアウトをすることが可能。

See the Pen bGqEEjq by yuichi (@yhamada1205) on CodePen.

配置方向の設定

配置方向の設定は、「flex-direction」で設定をする。

flex-direction:row（デフォルト）

左から右へ、横に配置。

See the Pen VwpeeJL by yuichi (@yhamada1205) on CodePen.

flex-direction:column

上から下へ、縦に配置。

See the Pen jOBWqOz by yuichi (@yhamada1205) on CodePen.

flex-direction:row-reverse

右から左へ、横に配置。

See the Pen OJpMNVg by yuichi (@yhamada1205) on CodePen.

flex-direction:column-reverse

下から上へ、縦に配置。

See the Pen PopZNZj by yuichi (@yhamada1205) on CodePen.

折り返しの設定

折り返しの設定は、「flex-wrap」で設定をする。

flex-wrap:no-wrap（デフォルト）

折り返しなし。

See the Pen abJdNVz by yuichi (@yhamada1205) on CodePen.

flex-wrap:wrap

折り返しあり。

See the Pen ZEeQWrN by yuichi (@yhamada1205) on CodePen.

flex-wrap:wrap-reverse

折り返しあり。逆に折り返す。

See the Pen YzZwqvV by yuichi (@yhamada1205) on CodePen.

水平方向の設定

水平方向の設定は、「justify-content」で設定をする。

justify-content:flex-start（デフォルト）

左揃えに配置。

See the Pen gOmPMbj by yuichi (@yhamada1205) on CodePen.

justify-content:flex-end

右揃えに配置。

See the Pen oNZbzKN by yuichi (@yhamada1205) on CodePen.

justify-content:center

中央揃えに配置。

See the Pen ZEeQpgq by yuichi (@yhamada1205) on CodePen.

justify-content:space-between

均等に配置。先頭は左揃え、末尾は右揃えに配置。

See the Pen RwprobR by yuichi (@yhamada1205) on CodePen.

justify-content:space-around

均等に配置。両端に半分の間隔を置く。

See the Pen PopZbqm by yuichi (@yhamada1205) on CodePen.

justify-content:space-evenly

均等に配置。両端へ均等に間隔を置く。

See the Pen abJdBde by yuichi (@yhamada1205) on CodePen.

垂直方向の設定

垂直方向の設定は、「align-items」で設定をする。

align-items:flex-start（デフォルト）

上揃えに配置。

See the Pen wvJMoqy by yuichi (@yhamada1205) on CodePen.

align-items:flex-end

下揃えに配置。

See the Pen mdWVOpw by yuichi (@yhamada1205) on CodePen.

align-items:center

中央揃えに配置。

See the Pen zYZroRY by yuichi (@yhamada1205) on CodePen.

align-items:stretch

範囲内で幅や高さが拡張されて配置。

See the Pen xxqZRWw by yuichi (@yhamada1205) on CodePen.

align-items:baseline

文字のベースラインに合わせて配置。

See the Pen abJdBPd by yuichi (@yhamada1205) on CodePen.

垂直方向（高さを揃える）の設定

垂直方向（高さを揃える）の設定は、「align-items」で設定をする。

align-content:flex-start

上揃えに配置。

See the Pen RwprKbQ by yuichi (@yhamada1205) on CodePen.

align-content:flex-end

下揃えに配置。

See the Pen LYWGydZ by yuichi (@yhamada1205) on CodePen.

align-content:center

中央揃えに配置。

See the Pen YzZwVvZ by yuichi (@yhamada1205) on CodePen.

align-content:space-between

均等に配置。先頭は上揃え、末尾は下揃えに配置。

See the Pen align-content: space-between; by yuichi (@yhamada1205) on CodePen.

align-content:space-around

均等に配置。上下に半分の間隔を置く。

See the Pen align-content: space-around; by yuichi (@yhamada1205) on CodePen.

align-content:space-evenly

均等に配置。上下にへ均等に間隔を置く。

See the Pen align-content: space-evenly; by yuichi (@yhamada1205) on CodePen.