@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 ルールの利用を紹介する記事も多くありました。

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

.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;
  }
}
*/

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