Flexboxで中の要素を一方に寄せる方法

こんにちは 😀

今回は Flexbox で中の要素を一方に寄せる方法を紹介したいと思います。

さっそくやっていきましょう

まずは、display: flexとjustify-content: space-betweenを設定しただけのパターンです。

上の例の 2,3,4 と書かれている要素を動かしていきたいと思います。

・左に寄せる

左寄せにしたい要素にmargin-right: autoを指定してあげることで、指定した要素から左にある全ての要素が左寄りになります。以下の例は 3 と書かれている要素にmargin-right: autoを指定した例です。

・右に寄せる

右寄せにしたい要素にmargin-left: autoを指定してあげることで、指定した要素から右にある全ての要素が右寄りになります。以下の例は 4 と書かれている要素にmargin-left: autoを指定した例です。

・中央に寄せる

間にある要素を中央に寄せたい場合は、中央に寄せたい部分の一番左の要素にmargin-left: auto、一番右の要素にmargin-right: autoを指定します。以下の例は 2 と書かれている要素にmargin-left: auto、4 と書かれている要素にmargin-right: autoを指定した例です。

最後に

紹介した方法を応用すると以下のように簡単な Navbar を作れたりもします。

自分は CSS 初心者なので間違っている点などあったら教えていただきたいです。
それでは、最後までお読みいただきありがとうございました 🎃