BanbaYa備忘録　CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。
このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。

オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。

Flexbox: Aligning with Auto Margins
by Samantha Ming

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Flexboxにおけるオートマージンの役割

Flexboxのalign-selfを使用すると、クロス軸のFlexアイテムをコントロールできることを先日の記事「CSS Flexboxの使い方を基礎から学べるチュートリアル: 28日目: align-selfプロパティ」で学んだと思います。

次に疑問に思うのは「メイン軸でもそれができますか？」ではないでしょうか。justify-selfはFlexboxでは効きません🤔 残念ながら、その答えはノーです😅 しかし、使用できる既存のプロパティがあります。それはオートマージン（margin: auto;）です。オートマージンを使用すると、特定要素の水平方向の位置合わせをコントロールすることができます。

オートマージンで水平方向の位置合わせ

しかも、オートマージンは垂直方向の配置もコントロールすることができます。

オートマージンで垂直方向の位置合わせ

水平と垂直を合わせると、特定要素を中央配置もできます！

オートマージンで中央配置

マージンについて理解する

この時点で少し混乱しているかもしれません。なぜmargin-leftは要素を右に自動的にプッシュするのでしょうか。また、margin-rightは左にプッシュするのでしょうか。直感に反しているように感じるかもしれませんが、心配しないでください。私も最初はそうでした😅

マージンとは、要素にスペースを追加するプロパティです。
margin-left: 50px;を定義すると、要素の左側に50pxのスペースが追加されます。これは言い換えると、要素を50px右にプッシュするのと同じことです。
margin-left: auto;を定義すると、autoは使用可能なスペースを計算し、要素の左側のスペース量を算出します。これにより、要素を右いっぱいにプッシュします。

マージンの仕組み

マージン	スペース	外観
margin-left	スペースを左に追加	要素を右にプッシュ
margin-right	スペースを右に追加	要素を左にプッシュ
margin-top	スペースを上に追加	要素を下にプッシュ
margin-bottom	スペースを下に追加	要素を上にプッシュ
margin	スペースを周囲に追加	要素を中央にプッシュ

オートマージンが常に優先される

オートマージンは常に優先されます、記述の順番も関係ありません。そして、Flexboxの配置に関するプロパティと一緒に定義した場合、Flexboxは効果がありません💪

オートマージン vs Flexboxのプロパティ

なぜ効果がないのか

空きスペースがオートマージンによって分配される場合、Flexした後に残ったスペースはすべてマージンに取られるため、Flexboxの配置に関するプロパティはその配置に影響を与えません。

デベロッパー以外の言葉で言えば、オートマージンとはあなたが親切にもあなたの家に泊まるように招待した無知な友人のことで、彼らは家全体を自分のものと考え、すべてのスペースを占拠するようなものです。そんな友達はいませんよね😂

オートマージンの効果的な使い方

オートマージンの効果的な使い方をいくつか紹介します。

オートマージンの効果的な使い方

このようにオートマージンを使用すると、ナビーゲションのアイテムも思い通りに配置できます。

Flexboxのプロパティとオートマージン、どちらを使うべきか

どちらをいつ使用すればよいのか、あなたは迷うかもしれません😅
選択の基本的な指針は、下記の通りです。

1. Flexboxのプロパティは常に使用する。
2. Flexboxのプロパティで配置が不可能な場合に、オートマージンを使用する。

その理由は、Flexboxのプロパティはオートマージンよりも直感的で分かりやすいからです。例えば、下記のコードを見てみてください。

Flexboxの知識がなくても、コードを読むだけで.childを最後に整列させているのが分かると思います。margin-top: auto;だと、どのように配置されるかコードからは分からないかもしれません。
もちろん、これは私の個人的なお勧めです。使用するプロジェクトやチームで適した方法を自由に選択できます。

参考リソース