flextester-top

前に flexbox のプロパティをまとめた記事を書きました
シンプルにまとまって結構見やすいよねっと我ながら満足してるのですけど align-items や align-content なんかはパッと見で全然何言ってるのかわからないです

文だとどうやってもわかりづらいので図にしよっかと考えていると、実際に動かせるほうが楽そう!と思ったのでこんなのを作りました!

flextester

flextester-img


下側の selectbox などを変えると、上の部分が変わります
実際にどうなるか確認できるのでわかりやすいんじゃないかと思います


ところで、上側はリサイズできるようになっているのですが Chrome だと元のサイズより小さくできません
バグだそうです

また、 IE で開くと

ienotsupported-1
ienotsupported-2


こんなメッセージがアニメーションで出るようになってます
flexbox 自体は IE も使えるようなのですが このページ作るのに新しい機能を使ってるので IE だと動かないんです

この URL を script タグで読み込めばどんなページでも IE はサポートしてません ってだせるはず
http://nmm.blog.jp/frame/ie-not-supported-loader.js