CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック

CSS Flexboxも、margin: auto;も、よく使用していると思います。
しかしよく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。

CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを紹介します。ヘッダやナビゲーションなど、微調整が必要なレイアウトに役立つテクニックです。

サイトのキャプチャ

The peculiar magic of flexbox and auto margins


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

しっかりと理解しておく

フロントエンドの制作をしていると、知らないことが何なのかを分かっていることがあります。必要とするCSSは十分知っているので、それをどのように使うのか、正しい構文が何であるかは意識しないでしょう。頭の中には空の引き出しがあり、その何かを調べようとすると、私が見つけるのは判読不可能な付箋ばかりです。

よく使用し、なんとなく知っているけれど、本当は理解できていないことがあるかもしれません。ここでは私にとってその中の一つ、CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するかを取り上げます。

CSS Flexboxとmargin: auto;

下記の例を考えてみましょう。

このスタイルシートは、何をしているでしょうか?
私は半年前に読んだSam Provenzaの記事「how auto-margins and flexbox work together」を思い出しました。その時は記事のコンセプトを理解することができず、デモをクリックすることさえしませんでした。

その記事では、margin: auto;がFlexアイテムにどのように影響するかを説明しています。

Flexアイテムに自動マージンを適用すると、そのマージンは適用される方向に応じて、Flexコンテナ内の余分なスペースを占有するように自動的に拡張されます。

どういうことなのか、シンプルなコードで検証してみます。
子のdiv要素が1つあるシンプルな親のdiv要素があるとします。

これらのdiv要素は、下記のCSSでスタイルされています。

この時点での表示は、下記のようになります。

See the Pen margin-auto: #1 by Robin Rendle (@robinrendle) on CodePen.

.childに「margin-left: auto;」を加えてみます。

どのように表示されると思いますか?
子のdiv要素に「margin-left: auto;」を加えると、下記のように表示されます。

See the Pen margin-auto: #2 by Robin Rendle (@robinrendle) on CodePen.

なぜ?と思ったでしょう。これは子のdiv要素が右端にくるように、左方向のマージンが親のdiv要素を押しているからです。
モダンブラウザ、そしてIE11, Edgeでも同様に機能します。

「margin: auto;」にして、すべてのマージンをautoにするとどうなるでしょうか。

「margin: auto;」にすると、下記のように表示されます。

See the Pen margin-auto: #3 by Robin Rendle (@robinrendle) on CodePen.

そうです。これは人気が高い中央配置のテクニックの1つです。子要素が親要素に対して、左右と上下の中央に配置されます。

同様に、margin-leftとmargin-topにautoに設定すると、Flexアイテムを親の右下に押し出すことができます。

See the Pen margin-auto: #4 by Robin Rendle (@robinrendle) on CodePen.

これがどういう現象かというと、「FlexアイテムはFlexコンテナ内の余分なスペースを占有するために、自動的にマージンを拡張する」と解釈されています。

Flexboxの子にmarginプロパティを設定すると、その方向から子を押し出します。例えば、margin-leftをautoにすると、子は右に移動します。margin-topをautoにすると、子は下に移動します。

CSS Flexboxとmargin: auto;の仕組みを理解することは、さまざまなレイアウトの実装に必要なことです。

Flexboxのjustify-selfやalign-selfでは、あなたが望むものを得ることができない場合があります。しかし、margin: auto;を使用すると、例えばナビゲーションのアイテムを整列させるメニューなどで、メニューの1つのアイテムを親要素の右端に配置したり、下端に配置したり、この仕組みが役立ちます。

この奇妙な仕様は、覚えておくことが重要だと思います。

sponsors

top of page

©2018 coliss