flexboxの基本（縦並び、横並び、中央寄せ、左寄せ、右寄せ）

xflexbox、便利です。

何もしないと、以下のように、block要素は縦に並ぶ

See the Pen JWerRv by benzenetarou@gmail.com (@benzenetarou) on CodePen.

親要素にdisplay: flexを設定すると、子要素が横に並ぶ

See the Pen WpYZRw by benzenetarou@gmail.com (@benzenetarou) on CodePen.

flex-direction: columnを設定すると、再び縦に並ぶ

See the Pen XMyepz by benzenetarou@gmail.com (@benzenetarou) on CodePen.

flex-direction: rowにして、横に並べてから、justify-content: flex-endを設定すると、右側に詰める。

See the Pen QpJqvE by benzenetarou@gmail.com (@benzenetarou) on CodePen.

justify-content: centerで中央寄せになる。

See the Pen qrQPPJ by benzenetarou@gmail.com (@benzenetarou) on CodePen.

flex-direction: columnでコンテンツを縦に配置してからjustify-content: centerにしても縦並びで中央寄せにはなりません。

jusitify-content: centerはあくまでも、横並びのときに横並びの要素をどう配置するかに使うみたいですね。

縦並びで、中央寄せにしたいときは、flex-direction: columnとalign-items: centerを設定します

See the Pen ryQGvJ by benzenetarou@gmail.com (@benzenetarou) on CodePen.

子要素のうち一つだけ、左寄せにしたいときは、子要素でmargin-right: autoを設定すると、左側に飛んでいきます。

See the Pen ZemXjv by benzenetarou@gmail.com (@benzenetarou) on CodePen.

flexboxの適用範囲は、display:flexをしていした要素の子要素までです。 なので、孫要素でもいろいろ位置を指定したかったら、子要素にもdisplay:flexを設定する必要があります。

See the Pen zZMEXJ by benzenetarou@gmail.com (@benzenetarou) on CodePen.

いろいろ複雑な配置もできる

See the Pen YZRrmz by benzenetarou@gmail.com (@benzenetarou) on CodePen.