CSS コーディング

flexboxにmargin: auto;を使って上下左右に要素を寄せる

margin: auto;を使って要素を寄せる

flexboxで要素を一つだけ右寄せにしたい時に使える方法を紹介します。

[jin-fusen1-even text=”要素を右に寄せたい!”]

要素を右に寄せる

[jin-yohaku50]
flexboxの使用時に要素を端に寄せてみましょう。

右に寄せたい場合は、寄せたい要素にmargin-left: auto; を追加します。

[jin-fusen2 text=”右のBOXにmargin-left:auto;を追加”]

この要素に「margin-left: auto;」

[jin-yohaku30]

HTML
CSS

縦並びで寄せる

[jin-yohaku20]
縦並びも同じ要領でmarginを当てていきます。

一番下の要素を寄せたい場合は、その要素にmargin-top: auto; を追加します。

[jin-fusen2 text=”下のBOXにmargin-left:auto;を追加”]

この要素に「margin-top: auto;」

[jin-yohaku30]

HTML
CSS

[jin-yohaku50]

Progate、Udemy、ドットインストール、Schooを比較!初心者が使うべきプログラミング学習サイトは?

スポンサーリンク

-CSS, コーディング
-

© 2020 まめしばweb Powered by AFFINGER5