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 検証サンプルページ（５） では、２つのインラインレベル Flex Container を並べてみています。あわせて、Flex Item もいくつかのパターンを用意しました。

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

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

ブロックレベルでは、

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