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

Post on:2018年8月23日

しっかりと理解しておく

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

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

CSS Flexboxとmargin: auto;

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

.parent {
  display: flex
}

.child {
  margin: auto;
}

.parent {

display: flex

}

.child {

margin: auto;

}

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

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

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

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

<div class="parent">
  <div class="child"></div>
</div>

</div>

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

.parent {
  display: flex;
  height: 400px;
  background-color: #222;
}

.child {
  background-color: red;
  width: 100px;
  height: 100px;
}

.parent {

display: flex;

height: 400px;

background-color: #222;

}

.child {

background-color: red;

width: 100px;

height: 100px;

}

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

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

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

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-left: auto;
}

.child {

background-color: red;

width: 100px;

height: 100px;

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にするとどうなるでしょうか。

.child {
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}

.child {

background-color: red;

width: 100px;

height: 100px;

margin: 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つのアイテムを親要素の右端に配置したり、下端に配置したり、この仕組みが役立ちます。

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