CSS3 マークアップ別Flexboxで要素を左端・センター・右端揃えのレイアウトを作る

IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。
f:id:kikiki-kiki:20170323200844p:plain
flex サポート状況

なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロゴ・ナビゲーション+ボタンの様な構成で、ロゴを左端、ナビゲーションをセンターにしてボタンを右端に置くデザインをFlexboxで作ってみようと思います。
f:id:kikiki-kiki:20170323201153p:plain ※いつもの事ながらIEではチェックしていません。

並べたい各要素が同じ階層のマークアップの場合

HTML

<header class="header">
  <div class="nav-wrapper">
    <p class="logo">LOGO</p>
    <nav class="navigation">
      <ul class="nav-list">
        <li class="nav-link"><a href="">LINK</a></li>
        ...
      </ul>
    </nav>
    <div class="nav-btn">
      <a class="btn">BUTTON</a>
    </div>
  </div>
</header>

Flexboxの揃え方 justify-content: space-between を使う方法

CSS

/* ▼ 共通部分 ▼ */
.header,
.logo,
.navigation
.nav-list,
.nav-btn
  box-sizing: border-box
.header
  width: 100%
.nav-list
  padding: 0 1em // 最小の左右のマージンを持たせておく
/* ▲ 共通部分 ▲ */
// Flex
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-between
  align-items: baseline

flexboxにjustify-content: space-between と指定すれば、ロゴ・ナビゲーション・ボタンの間隔が均等になるのでデザインが実現できます。

margin auto を利用する方法

CSS

/* 共通部分省略 */
// Flex
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  // justify-content: space-start <- default値
  align-items: baseline
.navigation
  margin: 0 auto

親要素がflexの子要素でmargin autoを使用すると親要素の幅内でいい感じに配置してくれる様です。
ですので、センター揃えにしたいナビゲーションにmargin: 0 autoを与えると右マージンに押されてボタンが右端に配置されデザインを実現することができます。
このautoで付けたマージンもjustify-content: space-betweenの間隔と同じように可変なのでレスポンシブやリキッドレイアウトにも対応可能かと思います。

おまけ margin autoを利用するとロゴだけ左揃えにもできる

ナビゲーションとボタンがflexを親に持つ同じ子要素なので、ロゴを左揃え・ナビゲーション・ボタンを右揃えにしたい時にはjustify-content: space-betweenは使えませんので、margin: autoがいい感じに幅を取ってくれることを利用すると実現が可能となります。

/* 共通部分省略 */
// Flex
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-end // 右を基点にする (全体右寄せ)
  align-items: baseline
.logo
  margin-right: auto

ロゴにmargin-right: autoを与えるとロゴの右側に取れるだけのマージンが付くので、ロゴのみ左揃えになります。
f:id:kikiki-kiki:20170323203950p:plain
　

ナビゲーションと内にボタンがあるマークアップの場合

レスポンシブデザインでナビゲーションとボタンを同時に変化させたい時とかこの様なマークアップもありそうです。
HTML

<header class="header">
  <div class="nav-wrapper">
    <p class="logo">LOGO</p>
    <nav class="navigation">
      <ul class="nav-list">
        <li class="nav-link"><a href="">LINK</a></li>
        ...
      </ul>
      <div class="nav-btn">
        <a class="btn">BUTTON</a>
      </div>
    </nav>
  </div>
</header>

2段重ねのFlexboxで実現する

‘.navigation'内の子要素も横並びにするので、ここもdisplay: flexにし、センター揃えにしたいナビゲーション(.nav-list)で調整する事で、キレイに左端揃え・センター揃え・右端揃えのレイアウトを実現することができます。

/* 共通部分省略 */
// Flex1 .logo と .navigation の並び
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  // justify-content: space-start <- default値
  align-items: baseline
// Flex2 .nav-list と .nav-btn の並び
.navigation
  display: flex
  flex-flow: row nowrap
  justify-content: center // 全体中揃え
  width: 100% // 残りの幅全体にする
  box-sizing: border-box // 必須
.nav4 .nav-list
  margin: 0 auto

.logoと.navigationをflexにする
widtth: 100%で.navigationを残りの部分一杯の領域にする
ナビゲーション(.nav-list)の左右のマージンをautoにして全体のセンターにする

ボタンがナビゲーションのリスト内にある場合

<header class="header">
  <div class="nav-wrapper">
    <p class="logo">LOGO</p>
    <nav class="navigation">
      <ul class="nav-list">
        <li class="nav-link"><a href="">LINK</a></li>
        ...
        <li class="nav-btn">
          <a class="btn">BUTTON</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

このマークアップだと完璧にナビゲーションのリンク部分だけをheaderのセンターに揃える方法を見つけることができませんでした。

ボタンにマージンを%で設定して調整するパターン

/* 共通部分省略 */
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-betwee
  align-items: baseline
.navigation
  width: 100%
  box-sizing: border-box // 必須
.nav-list
  display: flex
  flex-flow: row wrap
  justify-content: flex-end // 右端を基点にする
  padding-right: 0
.nav-btn
  margin-left: 25% // 適当な値に設定

.logo と .navigation をjustify-content: space-between で等間隔にし、.nav-listをflexにして子要素を並べ、リストの最後になるボタン(.nav-btn)の左マージンを適当な%で指定してそれっぽくすることができました。ボタンのマージンは親要素のn%なので、ブラウザの幅が狭いとロゴとの間隔が狭くなり、逆にブラウザの幅が広いとボタンとの間隔に対してロゴとの間隔が広くなります。
f:id:kikiki-kiki:20170323215701p:plain

ボタンを`position: absolute`で右端に固定するパターン

/* 共通部分省略 */
.nav-wrapper
  display: flex
  flex-flow: row nowrap
  justify-content: space-betwee
  align-items: baseline
  position: relative
.navigation
  display: flex
  flex-flow: row nowrap
  justify-content: space-around  // .logoとの間隔を作る
  width: 100%
  box-sizing: border-box // 必須
.nav-list
  display: flex
  flex-flow: row wrap
  // justify-content: space-start <- default値
  padding-right: 0
.nav-btn
  position: absolute
  right: 0

ナビゲーション内のリスト左揃えで始めボタンだけposition: absoluteで右端に固定しflex配置から外します。そして.navigationをFlexboxにしてjustify-content: space-aroundを指定するとロゴとの間隔もいい感じになります。しかし、absolute配置しているボタンの幅は無いものして計算されるのでブラウザの幅が狭くなるとナビゲーションのリストとボタンが重なってしまいますので、メディアクエリなどで小さくなった時のCSSを別途作成する必要がありそうです。
f:id:kikiki-kiki:20170323221203p:plain
　

サンプル

See the Pen Flex nav sample by KIKIKI (@chaika-design) on CodePen.

今までどうしてもIE対応があったりで、Bootstrapで流行ったfloatやdisplay: tableを使ったCSSを書くことが多くFlexboxをちゃんと使いこなせていなかったので今回この記事をかいて少しFlexboxにも慣れてきた感じがしてきました。
コーディングしない期間が続くと書き方を忘れていたり、新しいやり方のキャッチアップが疎かになってしまうので気をつけなきゃな―っとしみじみ感じています。

[参考]