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

Flexboxを使用する際、要素を左右に均等に配置するテクニックに悩むことはよくあります。特にヘッダーデザインなど、細部までこだわりたい場面での配置は重要です。

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

本記事の内容

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

失敗例

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;
}

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

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

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

style.css

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

.header-left {
}

.header-right {
}

ここで1つ補足しておきたいのが、今回使用したspace-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案件の受注を目指す方は必ず読んでおきましょう。