更新日2024年11月9日

対応ブラウザー

Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に-webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わってくるようで、今回は省略します。

ちなみに 2015 年 1 月の、日本のブラウザーシェアでは 1 位が IE11 で 29.64%を占めています。Flexbox に対応していない IE9 は 3.91%。これからも増えることはないと思うので、サイトによっては切り捨ててもいいかもしれません。

Flexbox の素敵なところ

今までは様々なプロパティーを組み合わせたり、JavaScript に頼っていたような配置方法も、Flexbox なら簡単に実装できます。例えば…

• CSS を一行プラスするだけで横並びにできる！
• 横並びになった要素の高さが最初から揃ってる！
• 要素を上下左右、好きな順序に並び替えられる！
• スペースの操作も自由自在！
• 高さの異なる横並びの要素を、簡単に上下中央揃え！

実際にどうなるのか見てみよう

利点をあげても、実際に見てみないとすごさはわからないと思うので、さっそく作っていきましょう。まずは元となるナビゲーションメニューを作成します。

HTML

<nav>  <ul class="main-nav">    <li><a href="#" class="logo">Logo</a></li>    <li><a href="#">Menu 1</a></li>    <li><a href="#">Menu 2</a></li>    <li><a href="#">Menu 3</a></li>    <li><a href="#">Menu 4</a></li>  </ul></nav>

CSS

.main-nav a {  margin: 10px;  border-radius: 5px;  background: #60b99a;  color: #fff;  display: block;  padding: 15px;  text-decoration: none;}.main-nav .logo {  background: #4584b1;}

こんな感じのメニュー。色やマージン等の設定のみで、まだ特に変わったことはしてません。

そんな素朴なナビゲーションメニューですが、メニューアイテムを包む.main-nav 要素にdisplay: flex; を加えると…

.main-nav {  display: flex;}

横並びになりました！簡単すぎる！

要素のスペースを自在に操ろう

justify-content プロパティーで、要素と要素の間や、表示位置をカスタマイズできます。値をspace-between とすると、最初の要素が左端に、最後の要素が右端に移動し、その間の要素は等間隔に並べられます。

.main-nav {  display: flex;  justify-content: space-between;}

右寄せ

値をflex-end にすると、要素が右端に並びます。

.main-nav {  display: flex;  justify-content: flex-end;}

中央揃え

center で中央揃え。float やposition を駆使して中央揃えしていた時代が嘘みたいです。

.main-nav {  display: flex;  justify-content: center;}

ロゴだけ左端に、メニューアイテムは右側に

上記例だとロゴもナビゲーションメニューも同等の扱いとなっていますが、ロゴは左に、メニューは右に置くという、標準的な配置をしてみましょう。ロゴを囲んでいるのはリストの最初の要素。ということで、:first-child セレクターで最初の要素を指定し、margin-right: auto; を加えます。

.main-nav {  display: flex;}.main-nav li:first-child {  margin-right: auto;}

1〜2 行の CSS を加えるだけで、ここまで簡単に配置方法を変更できるようになりました！少しずつ Flexbox の手軽さをつかめてきたと思います。

コンテンツ部分にも使ってみよう

先ほどデモで作成したナビゲーションメニューに、コンテンツとして 3 つのsection を加えました。

HTML

<div class="main">  <section class="col-1">    <h1>Column 1</h1>    <p>Lorem ipsum dolor sit amet...</p>  </section>  <section class="col-2">    <h1>Column 2</h1>    <p>Morbi non semper sapien...</p>    <p>Integer vel pellentesque elit...</p>  </section>  <section class="col-3">    <h1>Column 3</h1>    <p>Integer commodo...</p>  </section></div>

CSS

.main section {  margin: 10px;  border-radius: 5px;  background: #f5f0cf;  padding: 15px;}.main h1 {  color: #e6ac27;  font-size: 1.5rem;}.main p {  margin-top: 10px;}

こんな感じに CSS で簡単に装飾。

続いて、ナビゲーションと同様、コンテンツ部分の 3 つのカラムも横並びにしたいので.main クラスにもdisplay: flex; を加えましょう。

.main {  display: flex;}

横並びになりました。Flexbox の利点として、高さの異なるボックスが並んでも、このように自動的に一番長いボックスに合わせて高さをあわせてくれる機能があります。これまでは様々なハックを使って揃えてましたよね…。

しかしこのままではカラム 1〜3 の横幅が揃っていません。なのでflex プロパティーを使って横幅をコントロールしましょう。flex プロパティーはflex-grow、flex-shrink、flex-basis という 3 つのプロパティーのショートハンド。個別に指定することも、省略することも可能です。ここではflex-grow の機能として、要素を利用可能な領域いっぱいに等倍で並べる指定をします。

.main section {  flex: 1;}

横幅が揃いました。 IE11 にはショートハンドではなくflex-grow: 1; とすれば OK。

横幅の比率を変更する

上記例だと、2 番目のカラムだけ文章が多くてなんだか不格好。という事で、2 番目のカラムの横幅は他より広くしてバランスをとりましょう。2 番目のカラムにのみflex: 2; を指定し、他のカラムの 2 倍の横幅になるようにします。

.main .col-2 {  flex: 2;}

うまくバランスがとれました。

高さの異なる要素を垂直に中央揃え

以前は実装に悩まされたという人も少なくないであろう、垂直に中央揃え。Flexbox を使えば、これも一行で解決です。使用するプロパティーはalign-items 。サムネイル画像の配置なんかに使えそう。

.main {  align-items: center;}

他にもflex-end で下揃えにしたり、baseline でベースラインを揃えたりできます。

モバイル対応もこんなに簡単！

このままだと、上記画像のように画面の横幅を変更するとコンテンツが長細くなってかなり見にくいですね。モバイル端末での閲覧も考慮し、メディアクエリーを使ってレスポンシブレイアウトに対応させましょう。

flex-direction は、要素の配置方向を指定するプロパティー。デフォルト値はrow で、左から右の横並びが指定されていますが、ここではcolumn を使って「横幅が 700px 以下になったら横並びから縦並びに変更する」指定をします。

@media screen and (max-width: 700px) {  .main {    flex-direction: column;  }}

↓ デモ画面右上の「Edit on CODEPEN」をクリックで、デモを別タブ表示できます。画面サイズを変更してお試しください。

横幅が狭くなると縦並びに変更されました。flex-direction プロパティーは他にもreverse で逆並びにしたり、column-reverse で縦に逆並びなんかもできちゃいます。

Flexbox 関連記事

• 日本語対応！CSS Flexbox のチートシートを作ったので配布します
• Flexbox を使った 2 カラム・3 カラム・マルチレイアウトの基本と応用
• Flexbox を使ってレスポンシブ対応の「前の記事」「次の記事」リンクを実装
• レスポンシブ対応！縦に半分割している Web サイトの作り方

Float や Clearfix を駆使してナビゲーションを横並びにしていたのがまるで遠い昔のことのよう。レスポンシブ対応もゴッチャゴチャになりがちでしたが、これからは今回紹介した Flexbox を使った方法が主流となって CSS でレイアウトを組んでいくことになりそうです。使い方を覚えて、慣れるまでには少し時間がかかるかもしれませんが、記事内で紹介しているすべてのデモはCODEPENというコード共有サービスを利用して表示しているので、アカウントをお持ちの方はぜひ上記デモをフォークしてカスタマイズしたりいじくりまわして慣れていってください！私の CODEPEN アカウントもお気軽にフォローしてくださいね ;)