Flexbox CSSレイアウトの主力選手

flex-direction 子要素の並ぶ向き

row（default）

子要素を左から右に配置

row-reverse

子要素を右から左に配置

column

子要素を上から下に配置

column-reverse

子要素を下から上に配置

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

justify-content 水平方向の揃え

flex-start (default)

行の開始位置から配置。左揃え。

flex-end

行末から配置。右揃え。

center

中央揃え

space-between

最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置

space-around

両端の子要素も含め、均等に間隔をあけて配置

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

flex-wrap 子要素の折り返し

nowrap (default)

子要素を折り返しせず、一行に並べる。

wrap

子要素を折り返し、複数行に上から下へ並べる。

wrap-reverse

子要素を折り返し、複数行に下から上へ並べる。

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: center;

align-items 垂直方向の揃え

stretch（default）

親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置。

flex-start

親要素の開始位置から配置。上揃え。

flex-end

親要素の終点から配置。下揃え。

center

中央揃え。

baseline

ベースラインで揃える。

align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;