【flex】縦に並べた要素を中央でそろえるには align-items: center です

プログラミングを勉強中のみなさん、こんにちは！

今回は、flex-direction:column; で要素を縦並びにして、中央でそろえる方法を紹介します。

flex-direction

まずは flex-direction　を整理しておきましょう。

中央でそろええる

flex-direction: column;　で要素を縦に並べました。

See the Pen
flex-d:col by t.h (@tomtom15)
on CodePen.

ご覧の通り、flex-direction: column;　　だけだと、要素が左に寄っています。

次に中央でそろえます。

ブロック要素の中央寄せでパッと思い浮かぶのは　margin:0 auto;　だと思いますが、
これだと、要素一つ一つに設定しなければなりません。

flexを使用した場合は、　align-items: center;　を使いましょう。

See the Pen
flex-d:col&center by t.h (@tomtom15)
on CodePen.

詳しくはこちらをどうぞ。flexの考え方

まとめ

いかがでしたでしょうか。

とっても簡単ですよね。

flexは縦に並べても、横に並べても、align-items: center;　で要素を中央に持っていきましょう。

横並びのalign-items: center;はこちらの記事を参考にどうぞ。