スマートフォン・タブレットからインターネットサーバーオペレーション HTML5.x

APPW.jp HTML5.x

Chrome 24 でフレキシブルボックスの寸法を試します

「CSS Flexible Box Layout Module(W3C Candidate Recommendation, 18 September 2012)」に基づく検証サンプルをいくつか作成していこうと思います。

今回は、「CSS Flexible Box Layout Module 検証サンプルページ(2)」にて、Flex container(Flexコンテナ)上で Flex item(Flex アイテム)の寸法を中心にみています。

2013年2月6日現在、Google Chrome ブラウザのバージョン 24 において -webkit- のベンダープレフィックスありで有効となっていることを確認しています。

Flex item において、「flex: none ;」、「flex: initial ;」、「flex: auto ;」、「flex:(値);」の4つを試しています。「flex: none ;」の Flex item では、width を指定し、「flex: initial ;」の Flex item では、width と min-width を指定しています。

また、Flex container においては、すべて「flex-flow: row nowrap ;」としています。

@supports ルールを設定してみます

CSS3 columns プロパティを試します

flexbox でも要注意の word-break プロパティ

Chrome 27 で flexbox の寸法と軸を試します

Chrome 27 で Flexbox の寸法の混在を試します

Flexbox の寸法とラインの組み合わせを試します

Chrome 27 で inline-flex を試します

CSS3 メディアクエリをおさらい

CSS3 角丸とドロップシャドウを確認

CSS3 グラデーションの最新仕様を確認

via IPv4

カテゴリー

アーカイブ

Popular Posts