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

APPW.jp HTML5.x

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

「CSS Flexible Box Layout Module(W3C Candidate Recommendation, 18 September 2012)」に基づく検証サンプルをいくつか作成してきました。このサンプル作成シリーズは、いよいよ最終回です。

Dimension(寸法)の混在と Axis (軸)の調節を確認します。

CSS Flexible Box Layout Module 検証サンプルページ(8)

Chrome 27 でのスクリーンショットです。Flex アイテムがそれぞれの寸法設定をもち、Flex コンテナ内に余白を残しているときに、軸によるFlex アイテムの配置を調整します。

image

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

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

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

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

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

Chrome 27 で inline-flex を試します

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

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

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

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

via IPv4

カテゴリー

アーカイブ

Popular Posts