CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方

Post on:2020年1月21日

sponsors

ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。

Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。

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

Flexboxでのオートマージンの仕組み

Flexboxのオートマージンについてmagic of flexbox and auto marginsでも取り上げましたが、最近Flexboxのオートマージンについて混乱しているのを耳にし、他の人がそれを説明するのを見て、私も参加したいと思いました。

ナビゲーションを実装した時に、アイテムが全体を満たさない場合があります。
言い換えると、Flexコンテナの中にFlexアイテムを配置し、Flexアイテムが全体を満たしていない状態です。

See the Pen
ZEYLVEX by Chris Coyier (@chriscoyier)
on CodePen.

「Menu」だけを右端に移動したい時は、どうすればよいでしょうか？
オートマージン（margin: auto;）の出番です。.menuに「margin-left: auto;」を加えるだけで、右端に押し出されます。

See the Pen
WNbRLbG by Chris Coyier (@chriscoyier)
on CodePen.

では、論理プロパティを使用すると、どうでしょうか？
実際に、「margin-inline-start: auto;」を使用することもできます。特に表示方向を変更するかもしれない場合は、論理プロパティを使用する方がよいです。

「dir="rtl"」で表示方向を右から左にしても、「Menu」は端に表示されます。

See the Pen
gObgZpb by Chris Coyier (@chriscoyier)
on CodePen.

また、押し出すスペースがあると、オートマージンは水平方向だけでなく、垂直方向にも機能します。親要素の高さを広げて、.menuに「margin-inline-start: auto;」と「margin-block-start: auto;」を加えてみます。

See the Pen
XWJpobE by Chris Coyier (@chriscoyier)
on CodePen.

「Menu」が下に移動したのはそこに整列させたのではなく、オートマージンによるものです。