「レスポンシブデザイン」の作成が容易になると期待されるCSS3の「フレキシブルレイアウト」関連のプロパティですが、かなり古くから「display: box」と定義され登場しているにもかかわらず、今なお策定中のため、仕様がはっきりと定まっておらず、使ってみたいが、使えない状態が続いています。そこで、現状どこまで使えるのか備忘録としてまとめてみました。次のソースは、古いブラウザ(iOS、Androidを含む)からモダンブラウザまでカバーするCSSのサンプルです。また、子要素のdisplayプロパティの主な値の違いによるレイアウトの変化も載せています。
.flex{
 display : -webkit-box; 
 	/*古いwebkit系ブラウザ用*/
 display : -moz-box; /*古いFirefox用*/
 display : -ms-flexbox; /*IE9用*/
 display : -webkit-flex; 
 	/*やや古いChrome、iOS7以上のSafari用*/
 display : flex; /*モダンブラウザ用*/
 width:770px;
 margin:0 auto 15px auto;
 padding:10px;
 background: #eee;
 border:1px solid #333;
}
/*---子要素共通---*/
.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
※参照元:http://www.webcreativepark.net/css/flexible-box/display-flex/
戻るボタン