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

APPW.jp HTML5.x

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

「CSS Flexible Box Layout Module(W3C Candidate Recommendation, 18 September 2012)」に基づく検証サンプルをいくつか作成してきています。今回は、わたしが Flexbox で実際にできるのかどうかとても興味のあったことのひとつで、Dimension(寸法)の混在をいくつか確認してみました。

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

わたしの確認用ブラウザは、Chrome 27 です。次のスクリーンショットはその表示の一部となります。

image

わたしが Flexbox の仕様から思い描いたいくつかのレイアウトイメージを確認することができました。

そして、次回は、これに加えて Axis(軸)の調節を Chrome で確認してみたいと思います。

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

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

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

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

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

Chrome 27 で inline-flex を試します

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

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

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

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

via IPv4

カテゴリー

アーカイブ

Popular Posts