「レスポンシブデザイン」の作成が容易になると期待されるCSS3の「フレキシブルレイアウト」関連のプロパティですが、かなり古くから「display: box」と定義され登場しているにもかかわらず、今なお策定中のため、仕様がはっきりと定まっておらず、使ってみたいが、使えない状態が続いています。そこで、現状どこまで使えるのか備忘録としてまとめてみました。次のソースは、古いブラウザ(iOS、Androidを含む)からモダンブラウザまでカバーするCSSのサンプルです。また、子要素のdisplayプロパティの主な値の違いによるレイアウトの変化も載せています。
/*---子要素共通---*/
.flex-child,.flex-child2,.flex-child3,
.flex-child4,.flex-child5 {
width:100px;
padding:10px;
margin:0 10px 0 0;
color:#333;
font-size:13px;
}
フレキシブルボックス・子要素display指定無し(またはblock)
子要素1
サンプルテキスト1・サンプルテキスト1・サンプルテキスト1
子要素2
サンプルテキスト2・サンプルテキスト2・サンプルテキスト2・サンプルテキスト2
子要素3
サンプルテキスト3・サンプルテキスト3
子要素4
サンプルテキスト4・サンプルテキスト4・サンプルテキスト4
子要素5
サンプルテキスト5
子要素6
サンプルテキスト6・サンプルテキスト6
フレキシブルボックス・子要素display:table
子要素1
サンプルテキスト1・サンプルテキスト1・サンプルテキスト1
子要素2
サンプルテキスト2・サンプルテキスト2・サンプルテキスト2・サンプルテキスト2
子要素3
サンプルテキスト3・サンプルテキスト3
子要素4
サンプルテキスト4・サンプルテキスト4・サンプルテキスト4
子要素5
サンプルテキスト5
子要素6
サンプルテキスト6・サンプルテキスト6
フレキシブルボックス・子要素inline-table
子要素1
サンプルテキスト1・サンプルテキスト1・サンプルテキスト1
子要素2
サンプルテキスト2・サンプルテキスト2・サンプルテキスト2・サンプルテキスト2
子要素3
サンプルテキスト3・サンプルテキスト3
子要素4
サンプルテキスト4・サンプルテキスト4・サンプルテキスト4
子要素5
サンプルテキスト5
子要素6
サンプルテキスト6・サンプルテキスト6
フレキシブルボックス・子要素display:table-cell
子要素1
サンプルテキスト1・サンプルテキスト1・サンプルテキスト1
子要素2
サンプルテキスト2・サンプルテキスト2・サンプルテキスト2・サンプルテキスト2
子要素3
サンプルテキスト3・サンプルテキスト3
子要素4
サンプルテキスト4・サンプルテキスト4・サンプルテキスト4
子要素5
サンプルテキスト5
子要素6
サンプルテキスト6・サンプルテキスト6
フレキシブルボックス・子要素display:inline-block
(古いSafariであふれてしまう子要素6は省略)
子要素1
サンプルテキスト1・サンプルテキスト1・サンプルテキスト1
子要素2
サンプルテキスト2・サンプルテキスト2・サンプルテキスト2・サンプルテキスト2
子要素3
サンプルテキスト3・サンプルテキスト3
子要素4
サンプルテキスト4・サンプルテキスト4・サンプルテキスト4
子要素5
サンプルテキスト5