Flexbox（display:flex;）の書き方をマスターすれば、レイアウトのコーディングが楽になります。まずは、HTMLから用意しましょう。
Flexboxは、コンテナ（親要素）とアイテム（子要素）の2つの要素によって構成されます。この２つの要素を用意しましょう。

HTMLの設定

まず、コンテナ（親要素）が、<div>または<ul>で用意します。
コンテナ（親要素）の中に、アイテム（子要素）をいくつか作成します。

<div>または<ul>のコンテナ（親要素）にclassを指定しましょう。

<div class="flex_box">
　<div>ブロック１</div>
　<div>ブロック２</div>
　<div>ブロック３</div>
　<div>ブロック４</div>
</div>

<ul class="flex_box">
　<li>ブロック１</li>
　<li>ブロック２</li>
　<li>ブロック３</li>
　<li>ブロック４</li>
</ul>

flexboxとは

display:flex;を記述

display:flex;をコンテナ（親要素）に指定してみましょう。
アイテム（子要素）が、横に並びます。

.flex_box{
	display:flex;
}

flex-directionの記述

flex-directionプロパティは、横列の水平、縦列の垂直にアイテム（子要素）を配置する向きを指定することができます。

アイテムを左から右へ水平方向に配置

flex-direction: row;を設定すると、アイテムが左から右へ水平方向に配置されます。

.flex_box{
  flex-direction: row;
}

アイテムを右から左へ水平方向に配置

flex-direction: row-reverse;を設定すると、アイテムが左から右へ水平方向に配置されます。

.flex_box {
  flex-direction: row-reverse;
}

アイテムが上から下へ垂直方向に配置

flex-direction: column;を設定すると、アイテムが上から下へ垂直方向に配置されます。

.flex_box {
	flex-direction: column;
}

アイテムが下から上へ垂直方向に配置

flex-direction: column-reverse;を設定すると、アイテムが下から上へ垂直方向に配置されます。

.flex_box  {
	flex-direction: column-reverse;
}

flex-wrapの記述

flex-wrapプロパティは、複数のアイテム（子要素）を一行、または折り返し複数行に配置することができます。

折り返さず一行に配置

flex-wrap:nowrap;を設定すると、アイテムがに横に一行で配置されます。

.flex_box {
	flex-wrap:nowrap;
}

折り返し上から下に複数行で配置

flex-wrap:wrap;を設定すると、アイテムがに折り返して上から下に複数行で配置されます。

.flex_box {
	flex-wrap:wrap;
}

折り返し下から上に複数行で配置

flex-wrap:wrap-reverse;を設定すると、アイテムがに折り返して下から上に複数行で配置されます。

.flex_box {
	flex-wrap:wrap-reverse;
}

flex-flowの記述

flex-flowプロパティは、アイテムの並び順”flex-direction”と折り返し”flex-wrap”を指定するショートハンドです。

.flex_box {
  flex-flow: （flex-directionの値）（flex-wrapの値）;
}
◆ flex-directionの”row”と、flex-wrapの”nowrap”を定義した場合
.flex_box {
	flex-flow: row wrap;
}

justify-contentの記述

アイテムを左揃えに配置

.flex_box {
	justify-content: flex-start;
}

アイテムを右揃えに配置

.flex_box{
	justify-content: flex-end;
}

左右中央揃えで配置

.flex_box{
	justify-content: center;
}

最初と最後のアイテムは端に配置され、以外は等間隔で配置

justify-content: space-between;を設定すると、最初と最後のアイテムは端に配置され、そい以外は等間隔で間に配置されます。

.flex_box{
	justify-content: space-between;
}

全てのアイテムは等間隔に配置

.flex_box{
	justify-content: space-around;
}

おさらい

flexboxを理解することでレイアウトのコーディグはシンプルでわかりやすくなります。