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

APPW.jp HTML5.x

Chrome 27 で inline-flex を試します

「CSS Flexible Box Layout Module(W3C Candidate Recommendation, 18 September 2012)」に基づく検証サンプルをいくつか作成してきていますが、今回は、インラインレベル Flex Container を試してみました。

「display: inline-flex ;」の Flex Container を複数並べます。CSS Flexible Box Layout Module 検証サンプルページ(5) では、2つのインラインレベル Flex Container を並べてみています。あわせて、Flex Item もいくつかのパターンを用意しました。

なお、CSS Flexible Box Layout Module 検証サンプルページ(4) では、ブロックレベルの「display: flex ;」の Flex Container を2つ並べてみました。

Flex Container のインラインレベルとブロックレベルの違いを、Chrome 27 でのスクリーンショットを例にひとつあげてみます。
インラインレベルでは、

ブロックレベルでは、

現時点で、わたしのところで確認できるブラウザは、Chrome と Opera のそれぞれの最新バージョンです。他のブラウザでは、最新の仕様に対応していなかったり、すべてに対応していなかったりしています。

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

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

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

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

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

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

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

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

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

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

via IPv4

カテゴリー

アーカイブ