プログラミング

【flex】flex-direction:column; の中央寄せ margin:0 auto;ではダメ!?

スポンサーリンク

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; で縦並びにした要素の中央寄せです。

子要素に対して margin:0 auto; でもいいのですが、
align-items: center; でも中央寄せができます。
そして、flexの理解が深まります。

align-items: center; は縦方向の中央寄せのイメージがありますが、
flexでは交差軸としての考え方です。

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

まとめ

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

とっても簡単ですよね。

flex-direction: column;
align-items: center;

セットで覚えておくといいかもしれません。

flexに関連する記事も紹介しておきます。

スポンサーリンク

-プログラミング
-, , , , , ,

© 2022 サカらいふ Powered by AFFINGER5