"

フレキシブルボックスを使おう!

jQueryを使わずにCSSだけで、横並びの要素を表示させていきたい。

今回は見た目的にもスタンダードになっているフレキシブルボックスの使い方とハマリについて書いていきます。

MISSION:display:flex;の使い方を5つに分けて書くこと。

まだ微妙に書くブラウザが対応しきれていないこのCSSはデザイン的にはとっくにスタンダードになっていまして。

以前に書きました「WordPressでグリッドレイアウトデザイン!」の記事でやったようなjQueryを使って表現することが多かったのですが、ようやく標準っぽく使えるようになったので紹介します。以前の情報は詳しく調べたわけではないので、ニュアンスで読んでくださいませ。

  1. いままでの表現方法
  2. display:flex;になるまでの簡単な流れ
  3. 基本的な使い方
  4. iOSのサファリで動かない!
  5. 最後に

1.いままでの表現方法

とりあえず、いままで横並びにするために散々苦労してきた歴史があるのでご紹介。そして、それを利用しているサイトは技術的にそこまで新しいものでは「ない!」ということに気付いていただきたい。(以前に作ってリニューアルあれてないものはそりゃしかたないですよね)

その1 float:left;

こいつの使いづらさは半端じゃありませんでした(笑)
clear:both;と書かれた要素に辿りつくまでひたすら横に並べ続け、width,height,margin,paddingすべてがブラウザによって挙動が分かれ・・・改行のポイントがぐちゃぐちゃになり・・・悪夢です。二度と使いたくありません。

その2 display:inline-block;

こちらはまぁ、最近追加された方のCSSですね。良いところもいっぱいあります。inline要素とblock要素(この2つの言葉はもう使わないですが)のいいとこどりでした。

一番嬉しいのはinlineの要素にwidthやheightの指定ができるのに基本的にblock要素のような改行はしない。というところでした。

この2つを経てflexが誕生した様子。

2.display:flex;になるまでの簡単な流れ

flexという言葉になる前に同じ効果を得るためのCSSが浮かんでは消え・・・という流れがありました。いまでも古いブラウザに対応するために応用する必要があるかもしれません。

その1 display:box;

たしか、前述のinline-blockと同時期ぐらいにあった気がするのですが、未対応ブラウザが多かったため当時は調べもしませんでした。

その2 display:flexbox;

気を取り直して作られたのがこれだと思います。基本的に-webkit-などのベンダープレックスが邪魔に見えてたのと、inline-blockが安心便利だったので使いませんでした。

この2つを経てdisplay:flexが出てきた感じです。

3.基本的な使い方

基本的な使い方はものすごく簡単です。メニューを横に並べたいときを例にしてみます。

HTML5の内容 -----
<header>
  <h1>タイトル</h1>
  <ul class="yokonarabe">
    <li>HOME</li>
    <li>PROFILE</li>
    <li>CONTACT</li>
  </ul>
</header>

CSSの内容 -----
.yokonarabe {
  display:flex;
  flex-wrap:wrap;
}
(さらに任意で)
.yokonarabe li {
 width:90px; 
}

こんな感じのHTML&CSSを書いたらほぼすべてのブラウザで横並びのメニューが表現できたと思います。

display:flex;を横に並べたいliの親につけるのがポイントです。
このflexは設定した要素の子すべてに対して適用されますので、思ったように動かないときは何に設定したのかを最初に確認したら良いと思います。

flex-wrap:wrap;は折り返しの設定です。ulをはみ出してでも表示するのか、改行して表示するのか。レスポンシブデザインなら間違いなくwrapかなと思います。

li {width:90px;}としてメニューの各項目の長さを指定しましたが、ここでは書かないプロパティなどを指定するとwidthを自動で調整してくれたりします。

まだまだ、flexには設定できる項目がたくさんあるので、いろいろと調べてみてください。

4.iOSのサファリで動かない!

さて、恒例のハマりのコーナーですが、ちょっとびっくりして調べました。

IEやアンドロイドで動かないことがあるのではと思っていましたが(完全に偏見ですが)まさかのiPhoneで正常動作しませんでした。このページで画像をフレキシブルに表現したかったんですが・・・

調べたところ、iPhoneではまったくもって対応してないとのことで画像がただひたすら縦にならんでおりました。

.yokonarabe {
  display:-webkit-flex; ←この1行を追加
  display:flex;
  flex-wrap:wrap;
}

これで、いけると思ったら横には並んだが、今度は横幅に1行で納まるように重なりまくっておりました。

flex-wrapも無視。もちろんliにつけてたwidthも無視されておりました(笑)

.yokonarabe {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-flow:row wrap; ←さらにこの1行を追加
  flex-wrap:wrap;
}

これで、ようやくPCと同じ並びになりました。めでたしめでたし。

5.最後に

display: flex;はいままでに紆余曲折あったせいか、まだちょっと捻くれている感じがあります。
しかし、現状の表現ではデファクトスタンダードとしてしっかり使い方を覚えたほうが良いと思います。

また、ネット上にある説明やここと同じように解説をしているところがたくさんありますが、いつ書かれた記事なのかが命運を分けてきます。
必ず、いつの情報なのかを確認してくださいませ。

ちなみにこの記事は2015年4月18日の情報です。