CSS WEB制作

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

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

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

flex-direction

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

 

メモ

flex-direction: row; 水平に並べる(左から順に)※初期値
flex-direction: row-reverse; 水平に並べる(右から順に)
flex-direction: column; 縦方向に並べる(上から順に)
flex-direction: column-reverse; 縦方向に並べる(下から順に)

 

 

中央でそろええる

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;はこちらの記事を参考にどうぞ。

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5