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

@supports ルールの最新仕様は、CSS Conditional Rules Module Level 3 W3C Candidate Recommendation 4 April 2013 に含まれています。@supports ルールは、CSS について ( Property : Value ) というような形式での指定条件について、ブラウザがその実装をサポートしているかどうかを判定して分岐を行います。

「Firefox 22.0 でのレイアウト調整 」の記事では、Firefox 22 の flexbox が flex-wrap に未対応という件で調整を行っていました。その後も Google 検索から他の方の対応方法などを読ませていただいている中で、この @supports ルールの利用を紹介する記事も多くありました。

参考にさせて頂いて、わたしなりに設定してみることにしました。

[css]
.contentsWrapper {
margin: 0 0 0 0 ;
padding: 0 0 0 0 ;
width: 100%;
overflow: visible ;
clear: both ;

text-align: center ;
vertical-align: top ;

display: block ;

display: -webkit-box ;
-webkit-box-pack: center ;

display: -ms-flexbox ;
-ms-flex-direction: row ;
-ms-flex-align: start ;
-ms-flex-pack: center ;
-ms-flex-wrap: wrap ;

display: -webkit-flex ;
/* -webkit-flex-direction: row ; */
/* -webkit-flex-wrap: wrap ; */
-webkit-flex-flow: row wrap ;

-webkit-justify-content: center ;
-webkit-align-items: flex-start ;
-webkit-align-content: flex-start ;

@supports (flex-wrap: wrap) {
display: flex ;
/* flex-direction: row ; */
/* flex-wrap: wrap ; */
flex-flow: row wrap ;

justify-content: center ;
align-items: flex-start ;
align-content: flex-start ;
}
}

/*
@-moz-document url-prefix( ) {
.contentsWrapper {
display: block;
}
}
*/
[/css]

@supports (flex-wrap: wrap) { } で、flex-wrap: wrap をサポートしているときのルールとなり、また、@supports not (flex-wrap: wrap) { } で、flex-wrap: wrap をサポートしていないときのルールとなります。