CSS のFlexible Box Layout が

ヤバい

2013/09/10(火) html5nagoya#7

<!-- ここから追記 -->

追記

• 今日話そうとしたネタが、綺麗にまとまっている（本日 9/10 付けの）ブログ記事を見つけてしまいました・・・

• flexboxの旧仕様、改定仕様、現行仕様の一覧（http://tech.naver.jp/blog/?p=2479）

• こっち見た方が分かりやすくて良いと思いますので、僕はヤバいってことだけ言います

<!-- ここまで追記 -->

スマートフォンでよくあるやつ

スマートフォンでよくあるやつ

ここは幅固定にしたい ここも幅固定にしたい

スマートフォンでよくあるやつ

スマートフォンでよくあるやつ

ここは伸縮してほしい

Flexible Box Layout

• http://www.w3.org/TR/css3-flexbox/

ヤバい

何がヤバいって

何がヤバいってその仕様の

変遷っぷりがヤバい

2009年ごろ

2009年ごろ

•外側の要素に display: box;

•内側の要素に box-flex: 1; など

•初期のスマートフォンサイトなんかはこれが書かれてることが多い

2011年ごろ

2011年ごろ

•外側の要素に display: flexbox;

•内側の要素に box-flex: 1; など

2012年ごろ

2012年ごろ

•外側の要素に display: flex;

•内側の要素は指定しなくていいよー

Flexible Box Layout

• 3、3種類ある・・・ッ！

Flexible Box Layout

•試しに全部やってみた

• http://codepen.io/girigiribauer/pen/BdAeC

•ベンダープレフィックスとかは（調べるの面倒くさかったので）全部入り

•一通りに対応した書き方とか怖くて考えたくない

display: table;

•この例なら display: table; でいいじゃない

• table タグ使わずに、テーブルレイアウト（rowspanとかは対応してない）

• IE8から使える

display: table;

display: table;

まとめ

まとめ

•決まりきっていない仕様を使うのは怖い面もあることを改めて認識した

まとめ

•決まりきっていない仕様を使うのは怖い面もあることを改めて認識した

• display: table はけっこう使える

まとめ

•決まりきっていない仕様を使うのは怖い面もあることを改めて認識した

• display: table はけっこう使える

•（試しにcodepen使ってみたけど）スマートフォンでcodepenは使いづらい（スクロール出来ない・・・）