【HTML&CSS】Flexboxを使ってブロック要素を左右に分ける方法を解説！

Flexboxを使ってヘッダーを作ろうとしていますが、要素を上手く両脇に寄せる事が出来ません！助けてください！

今回の記事ではこんな悩みを解決していきます。

本記事の内容

Flexboxの使い方を学習して行く事で非常に多くのレイアウトが組めるようになり、ランディングページ（LP)を開発する様な案件の受注も出来るようになります。

そこで今回の記事ではヘッダーメニューの実装を始め、ブロック要素を複数設置する場合に使える、ブロック要素を両脇に寄せる方法を解説していきます。

Flexboxを使い慣れていない昔の僕がハマった失敗例も載せておくので、失敗例と合わせて正しい方法を理解しておきましょう。

失敗例

startとendで両サイドに寄せようとしていた。

flexな要素に対して位置を調整する場合には justify-contentを活用する事が出来ます。そこで下記のように、header-left, header-rightのクラスそれぞれにstartとendを設定する事で両脇に要素を寄せようとしていました。

index.html


<header>
  <div class="header-left">Sample Page</div>
  <div class="header-right">Sample Logo</div>
</header>

style.css


header {
  display: flex;
}

.header-left {
  justify-content: start;
}

.header-right {
  justify-content: end;
}

一見上手く行きそうに見えますが、実際は下記の画像の様にサイトタイトルもロゴも左寄せになってしまいました。

ブロック要素1つ1つに対しての設定ではなく、親要素に対して設定するべきだった

header-leftとheader-rightのクラスに対して justify-contentを使うのではなく、親要素であるheaderの方から制御する事で思い通りのレイアウトになります。

style.css


header {
  display: flex;
  justify-content: space-between;
}

.header-left {
}

.header-right {
}

ここで1つ補足しておきたいのが、今回使用したjustify-betweenは厳密には要素を左右に配置するものではありません。

MDNのドキュメントには下記のような説明が記されています。

各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せる
https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

ブロック要素が2つしか無い場合は、1つ目を先頭に寄せて2つ目を末尾に寄せてくれるので、結果としては今回の様なヘッダーメニューを実現する事が可能でした。

しかし3つブロック要素が含まれている場合はそれぞれのブロックは均等に配置されるという事を覚えておきましょう。

justify-contentを活用して指定出来る値は下記のサイトに全て記載があります。

ちなみに今回はspace-betweenを活用しましたが、space-aroundやspace-evenlyを活用する事でも実現が可能です。

ただspace-aroundの場合は「各アイテムの両側に半分の大きさの間隔を置く」、space-evenlyの場合は「各アイテムの周りに同じ大きさの間隔を置く」と言ったように、配置間隔が異なります。

実現したいデザインに合わせて使い分けられるようになりましょう。

HTML&CSSでのデザインをしっかりと学習したい方は、下記の書籍を読んで実践する事で最低限の知識を身に付ける事が出来ます。

created by Rinker

CSSの基本からFlexboxやGrid Layout、そしてレスポンシブ対応についての記述もあるのでとても参考になる1冊となっています。

将来的にマークアップエンジニアやフリーランスとしてLP案件の受注を目指す方は必ず読んでおきましょう。