CSSのdisplay: box;ってどうなったんだっけ問題

久しくCSSをちゃんと勉強していなかったので知識が2010年ぐらいで止まっています。

「仕様が策定途中だったdisplay:box;って今どうなってるんだっけ？？ 」

数カ月前に友人がdisplay: box;の書き方はもう古いと、しれっと言っていたのが気になって実際どうなんだろうと思いまじめに調べてみました。

もはやこの辺、変化が多すぎて追うのやめてたけど若い子に教えるにあたってちゃんと調べようと・・とぼとぼ。。。

結論

早速結論！

display: box;

なんてなくなってました！ホントありがとうございました！
当然の事ながら、それに付随するbox-pack, box-alignなどもまるまる消えています。
それでもChromeやSafariなどはそれらのプロパティも動作するようでして、何も考えずにSassのmix-in作ってマークアップした去年のプロダクトは未だにその実装で動いているようです。ありがとう。ありがとう。

経緯

ブツブツ文句を書きつつも経緯はこんな感じです。

2009年ごろ

display: box;

がドラフト化される。
Flexible Box Layout Module (W3C Working Draft, 23 July 2009)

2012年

display: flexbox;

がドラフト化される。
IE10, Android4.1, 4.3がこれを実装している様。
CSS Flexible Box Layout Module (W3C Working Draft, 22 March 2012)

2015年現在

display: flex;

が最新の仕様。
CSS Flexible Box Layout Module Level 1(W3C Last Call Working Draft 14 May 2015)

抑えるべきポイント・用語

• container
• items

まずはこの２つを覚えるべき

※引用元：CSS Flexible Box Layout Module Level 1

そのままですが、この図でいうところのflex containerと書いてあるとこがcontainerでflex itemと書かれている二箇所がitemになります。

マークアップに直すと。.containerにdisplay: flex;を指定してitem側に後述するitemようのプロパティを書いていくようです。

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div> 

.container {
  display: flex;
}

使えそうなプロパティ

A Complete Guide to Flexbox
このページに素晴らしいまとめがあったので、あまり詳しく書きませんが、以下使えるプロパティです。

container向け

• flex-direction
  • itemが並ぶ方向、横方向だけでなく縦にも並べられる
• flex-wrap
  • itemがcontainerの幅を超えたら改行(折り返す)するかどうか。
• flex-flow
  • flex-directionとflex-wrapのショートハンド
• justify-content
  • itemの横方向への並べ方、旧box-pack
• align-items
  • itemの縦方向への並べ方、旧box-align
• align-content
  • itemが複数行になったとき、containerに対して各々の行をどのように配置するか

item向け

• order
  • 並び順
• flex-grow
  • container内にできた余白に対して、他のitemと比べどれ位伸長させるか
  • デフォルトは0で全てのitemを1にしたら等幅になる
• flex-shrink
  • flex-wrap: nowrapでitemがcontainerをはみ出した時にどれ位短縮させるか
• flex-basis
  • widht, heightみたいなもの
• flex
  • flex-grow, flex-shrink, flex-basisのショートハンド
• align-self
  • 個別のitemにalignを指定

果たして対応ブラウザは？

Can I use... Support tables for HTML5, CSS3, etc

PCはIEのバージョンが幅広く使わている現状もまだあるので、使いづらいだろうとは思っていたものの、スマホでもAndroidの4系で2012年の仕様が生きており、この指定方法だけに頼るのも微妙なところがありますね。
なので調べたところによると以下のように書いて旧式の指定方法でフォールバックさせるのが一般的なようです。

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

まとめ

うーん、未だ過渡期ですね。とは言えブラウザベンダー側が2009年ぐらいからの仕様をまだ利用できるようにしてくれているのでだいぶマシな気もしますが。(floatでレイアウトするよりは・・)
JSもそうだけどCSSもしばしば追っておかないとあっという間に置いて行かれますね。気をつけないと・・・

╭( ・ㅂ・)و ̑̑ ｵﾗｯｵﾗｯ!

その他参考URL

CSS3 Flexbox: display: box vs. flexbox vs. flex

オススメCSS本

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

あわせて読みたい

www.ie-kau.net