こんにちは、yutaです。
最近、webデザインの勉強をしているんですが、divなどの要素をいくつも入れ子にした後に、子要素を中央寄せしようとしても、なかなかうまくいかない・・・という問題に直面したので解決方法をメモしておきます。
目標は下図の状態です。div1, div2, div3と入れ子になっています。
やりたいことは以下の2つ。
・div1に対して、div2を右下配置
・div2に対して、div3を中央配置
もしも、div1とdiv2しかない場合は、
親要素(div1)をposition: relative;にしたうえで、
子要素(div2)をposition: absolute;にして、right: 0; bottom: 0;を指定すれば、右下配置になります。
しかし、div1, div2に加えさらにdiv3が入れ子になっていると、
div2を右下配置するためにposition: absolute;を使っているため、
同じ方法でdiv3の配置をいじれない・・・という問題が起きます。
※div3を親要素div2に対して、位置指定したい時は、div2のpositionをrelativeにする必要がありますが、div2は既にabsoluteにしているのでdiv3を動かせない。
そこで、display: flex;を使うとこの問題を解決できる！
relativeとか、absoluteとかもう消してください。笑
具体的としては、以下の図とソースコードに示している通りですが、一応箇条書きにしますね。
【Step.1】
前提として、div1, div2, div3が以下のソースコードのように入れ子になっているものとします。
・Step.1は全てcssファイルのclass=”div1″に記述。
・display: flex;を記述。 → flex機能の有効化。
・flex-direction: row-reverse;を記述。 → 子要素の並びを「親要素の右から横並び」に指定。
・align-items: flex-end;を記述。 → 子要素を「親要素に対して下揃え」で配置。
これで、div2はdiv1に対して、下図の位置に配置されます。
次はdiv3の配置ですね。
【Step.2】
・Step.2は全てcssファイルのclass=”div2″に記述。
・display: flex;を記述。 → flex機能の有効化。
・flex-direction: column; → 子要素の並びを「親要素に対して縦並び」に指定。
・justify-content: center; → 子要素を親要素に対して中央寄せ。
ポイント：flex-direction: column;で子要素を親要素に対して縦並びにしているので、justify-content: center;で子要素が縦方向に中央寄せされる。
【Step.3】
・Step.3は全てcssファイルのclass=”div3″に記述。
・margin: 0 auto; → 子要素を親要素に対して横方向に中央寄せ。
これで無事に、div3がdiv2に対して縦方向にも横方向にも中央寄せされました。
以上、が要素が複数入れ子になったときに子要素を中央寄せする方法でした。備忘録的に書きましたが、誰かの役に立てると幸いです。
display: flex;は使い方次第でもっと色々なことができます。詳しい説明はこちらのサイトがわかりやすかったのでリンクを貼っておきます。
【CSS】今更ながら、フレックスボックスの使い方をまとめてみた。
では、また。
