log > Flexboxを触った

Flexboxを触った

以前から気になっていたFlexboxを触ったので経緯を残す。ちゃんと学びたい場合は、CSS flexible box の利用 - CSS | MDNを参考にするといい。


Flexboxは、floatやそのほかのCSSでは難しいレイアウトを様々なサイズで実現するためのプロパティ。以前から知っていたが、使ったことはなかった。昨年、まだ中央寄せで消耗してるの? - @yoshiko_pgを読んで、学ぶことを決意した。で、IEのサポートが11になる(Vista SP2は9)ので、このタイミングで学ぼうと思った。1

ベンダープレフィックスは、IE10とiOS8以前、Andoroid4.3以前に必要らしい。まあ、別にもうサポートしなくてもいいだろう、と思って念のため調べたら、Googleの発表しているAndroidバージョン別シェアで4.3以前が30%近くいるので、-webkit-をつけた方がいいかもしれない。ちなみにAppleの発表したデータだと、iOS8は21%。まあ、たぶんみんなAutoprefixer使ってるからあんまり気にしてないと思うけど。


まず、これからのCSSレイアウトはFlexboxで決まり! | Webクリエイターボックスをやった。わかりやすくていいチュートリアルだった。

その後、CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリスを見た。プロパティの数が多すぎるので、Flexbox Playgroundをいじりつつ調べた。

とりあえず、ほかにもいろいろ調べたが、とりあえずきりがいいので終えた。