CSS の Flexible Box Layout がヤバい
-
Upload
girigiribauer -
Category
Technology
-
view
634 -
download
0
description
Transcript of CSS の Flexible Box Layout がヤバい
![Page 1: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/1.jpg)
CSS のFlexible Box Layout が
ヤバい
2013/09/10(火) html5nagoya#7
![Page 2: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/2.jpg)
<!-- ここから追記 -->
![Page 3: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/3.jpg)
追記
• 今日話そうとしたネタが、綺麗にまとまっている(本日 9/10 付けの)ブログ記事を見つけてしまいました・・・
• flexboxの旧仕様、改定仕様、現行仕様の一覧(http://tech.naver.jp/blog/?p=2479)
• こっち見た方が分かりやすくて良いと思いますので、僕はヤバいってことだけ言います
![Page 4: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/4.jpg)
<!-- ここまで追記 -->
![Page 5: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/5.jpg)
スマートフォンでよくあるやつ
![Page 6: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/6.jpg)
スマートフォンでよくあるやつ
ここは幅固定にしたい ここも幅固定にしたい
![Page 7: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/7.jpg)
スマートフォンでよくあるやつ
![Page 8: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/8.jpg)
スマートフォンでよくあるやつ
ここは伸縮してほしい
![Page 9: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/9.jpg)
Flexible Box Layout
• http://www.w3.org/TR/css3-flexbox/
![Page 10: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/10.jpg)
ヤバい
![Page 11: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/11.jpg)
何がヤバいって
![Page 12: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/12.jpg)
何がヤバいってその仕様の
変遷っぷりがヤバい
![Page 13: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/13.jpg)
2009年ごろ
![Page 14: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/14.jpg)
2009年ごろ
•外側の要素に display: box;
•内側の要素に box-flex: 1; など
•初期のスマートフォンサイトなんかはこれが書かれてることが多い
![Page 15: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/15.jpg)
2011年ごろ
![Page 16: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/16.jpg)
2011年ごろ
•外側の要素に display: flexbox;
•内側の要素に box-flex: 1; など
![Page 17: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/17.jpg)
2012年ごろ
![Page 18: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/18.jpg)
2012年ごろ
•外側の要素に display: flex;
•内側の要素は指定しなくていいよー
![Page 19: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/19.jpg)
Flexible Box Layout
• 3、3種類ある・・・ッ!
![Page 20: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/20.jpg)
Flexible Box Layout
•試しに全部やってみた
• http://codepen.io/girigiribauer/pen/BdAeC
•ベンダープレフィックスとかは(調べるの面倒くさかったので)全部入り
•一通りに対応した書き方とか怖くて考えたくない
![Page 21: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/21.jpg)
display: table;
•この例なら display: table; でいいじゃない
• table タグ使わずに、テーブルレイアウト(rowspanとかは対応してない)
• IE8から使える
![Page 22: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/22.jpg)
display: table;
![Page 23: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/23.jpg)
display: table;
![Page 24: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/24.jpg)
まとめ
![Page 25: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/25.jpg)
まとめ
•決まりきっていない仕様を使うのは怖い面もあることを改めて認識した
![Page 26: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/26.jpg)
まとめ
•決まりきっていない仕様を使うのは怖い面もあることを改めて認識した
• display: table はけっこう使える
![Page 27: CSS の Flexible Box Layout がヤバい](https://reader034.fdocuments.net/reader034/viewer/2022051412/549a42cfb47959514d8b59a9/html5/thumbnails/27.jpg)
まとめ
•決まりきっていない仕様を使うのは怖い面もあることを改めて認識した
• display: table はけっこう使える
•(試しにcodepen使ってみたけど)スマートフォンでcodepenは使いづらい(スクロール出来ない・・・)