こんにちは、yutaです。
今回僕が実現させたかったのは↓のレイアウト
これは、Flexboxを使って2カラムの<div>を作り、片方に画像を一枚、もう片方に画像を2枚縦並びで置き、これらをまとめてセンタリングするというものです。
僕が最初にコーディングしてブラウザで開いたときは↓のように表示されてしまいました。
センタリングになっていませんね。
実は、かなり基礎的なところでミスをしていました。笑
<img>はinline要素なので、画面幅に要素が入り込む隙間がある限り横並びに配置され、隙間が足りない場合は改行されます。
僕は右側のカラムで<img>にdisplay指定をしていなかったため、ブラウザを広げると↓のように横並びに表示されます。そして、この場合はセンタリングされます。
というわけで、これを解決するには<img>にdisplay:block;指定をすればOKです。
ところで、flexして2カラムにした<div>をそもそもどうやってセンタリングするかという話ですが、これはセンタリングしたい<div>の外側に2つ<div>を追加したうえでそれらをcssでちょっといじってあげれば解決です。では、説明していきます。
↓のコードで<div class=”flexbox1″>がセンタリングしたいflexboxです。これの外側に赤枠で示すように<div>を2つ追加し、それぞれclassを付加しています。
このflexbox自体は<div>(ブロックレベル要素)なので、たとえ画面幅に隙間があったとしても、要素の領域は画面いっぱいに広がります(width指定をしない場合)。
なので、今回flexboxの外側に<div class=”inlineblock1″>を作り、これに対してcssでdisplay:inline-block;指定しました。これにより、flexboxの領域がその中に入っている要素(今回の場合、画像)の幅になります。
要するに↓
ここまできたら、あとはもう1つ<div>で囲んで、cssでtext-align: center;指定すれば↓のようにセンタリングされます。
ちなみに、inline-blockはinlineとblockの両方の性質を持っているので、「いちいちdivで囲んでtext-align: center;指定しなくてもmargin: 0 auto;でいいのでは？」と思われるかもしれませんが、それではうまくいきません。
displayの違いによるmargin: 0 auto;とtext-align: center;の比較はこちらのページが非常にわかりやすいのでチェックしてみてください。
というわけで今回は以上になります。
ブログランキングに参加していますので、↓のバナーをクリックしていただけると嬉しいです。では、また！
