IE8以下のサポートも終わり自動アップデートになってきていますし、CSS3のFlexboxもそろそろ実制作で活用できる用になってきていると思っています。
flex サポート状況
なので、下記画像のようなWEBサイトのグローバルナビゲーションとかでよくある例えばロゴ・ナビゲーション+ボタンの様な構成で、ロゴを左端、ナビゲーションをセンターにしてボタンを右端に置くデザインをFlexboxで作ってみようと思います。
※いつもの事ながら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 を使う方法
/* ▼ 共通部分 ▼ */ .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 を利用する方法
/* 共通部分省略 */ // 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を与えるとロゴの右側に取れるだけのマージンが付くので、ロゴのみ左揃えになります。
ナビゲーションと内にボタンがあるマークアップの場合
レスポンシブデザインでナビゲーションとボタンを同時に変化させたい時とかこの様なマークアップもありそうです。
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%なので、ブラウザの幅が狭いとロゴとの間隔が狭くなり、逆にブラウザの幅が広いとボタンとの間隔に対してロゴとの間隔が広くなります。
ボタンを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を別途作成する必要がありそうです。
サンプル
See the Pen Flex nav sample by KIKIKI (@chaika-design) on CodePen.
今までどうしてもIE対応があったりで、Bootstrapで流行ったfloatやdisplay: tableを使ったCSSを書くことが多くFlexboxをちゃんと使いこなせていなかったので今回この記事をかいて少しFlexboxにも慣れてきた感じがしてきました。
コーディングしない期間が続くと書き方を忘れていたり、新しいやり方のキャッチアップが疎かになってしまうので気をつけなきゃな―っとしみじみ感じています。
[参考]
- CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG
- Flexboxレイアウトまとめ - Qiita
- CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
- Flexboxを使いこなして柔軟過ぎるCSSレイアウトを実現しよう。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)
- 作者: 吉田真麻
- 出版社/メーカー: 翔泳社
- 発売日: 2015/11/03
- メディア: 大型本
- この商品を含むブログを見る
![神速Illustrator [グラフィックデザイン編] CC対応](https://images-fe.ssl-images-amazon.com/images/I/51unKJ3Ig1L._SL160_.jpg "神速Illustrator [グラフィックデザイン編] CC対応")
