フレックスボックスのコードはSafariを除くすべてのブラウザで動作します。どうして？

Question

リストタグ付きのグリッド列では、余分なHTMLリスト要素ごとに自動幅を有効にして、3列ごとに正しい順序で表示する必要があります。

<style> 
 
     ul { 
 
      margin: 0; 
 
      padding: 0; 
 
      display: -webkit-flex; 
 
      display: flex; 
 
      -webkit-flex-wrap: wrap; 
 
      -ms-flex-wrap: wrap; 
 
      flex-wrap: wrap; 
 
      -webkit-flex-direction: column; 
 
      -ms-flex-direction: column; 
 
      flex-direction: column; 
 
      height: 150px; 
 
      width:auto; 
 
     } 
 
    
 
     li { 
 
      float: left; 
 
      display: inline-block; 
 
      list-style: none; 
 
      position: relative; 
 
      height: 50px; 
 
      width: 50px; 
 
     } 
 
    </style>

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    </ul>

これは私がこれまで試してみましたが何であると私は、この追加しない限り、絶対に他のすべてのブラウザ上で細かいが、Safariブラウザと互換性がありません動作します： display: -webkit-flex;を

は、これは私の例です。

私はこのような出力変換したい：

1 4 7 10 
2 5 8 11 
3 6 9 12 

それは私がこの今のところ、私はすべてでは、この問題を解決するように見えるカントSafariブラウザのために働いて得ることが重要ですが、私は任意の助けが適切でしょう:)

テストリンク：

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

Answer 1

フレキシボックスは、CSS3の技術です。これは比較的新しく、一部のブラウザではflexプロパティを完全にサポートしていないことを意味します。

はここでランダウンです：

• IE 8と9 はないサポートフレキシボックスを行います。これらのブラウザでflexプロパティを使用する場合は、時間を無駄にしないでください。 A flexbox polyfillはしばらくの間ラウンドを行ったが、うまく機能せず、もはや維持されなかった。

• IE 10は、previous version of flexboxをサポートし、vendor prefixesを必要とします。現在の仕様の特定のプロパティはIE10ではサポートされていないことに注意してください（flex-grow,flex-shrink、flex-basisなど）。 Flexbox 2012 Property Indexを参照してください。

• IE 11は良いですがバグです。これはcurrent flexbox standardに基づいています。いくつかの問題については、this pageの既知の問題タブを参照してください。次を参照してください。flex property not working in IE

• Chrome、Firefox、Edgeではすべてがうまくいきます。軽度のバグや矛盾がありますが、通常は簡単に修正できます。 Implied Minimum Flex Sizingを気にする必要があります。サイズ変更やスクロールバーの問題が発生することがあります。

• Safariバージョン9以降は、プレフィックスなしの現在のフレックスボックス仕様をサポートしています。しかし、古いSafariのバージョンでは、プレフィックスが-webkit-必要です。 min-widthとmax-widthでアライメントの問題が発生することがあります。これはflexで解決できます。ベンダープレフィックスがAutoprefixerを使用（すべて必ずしもそうとは限らないが）多くを追加する簡単な方法について http://caniuse.com/#search=flex

  ：このページを参照して、フレキシボックスブラウザのサポートの完全なレビューについてはFlex items not stacking properly in Safari

を参照してください。Safariについては、-webkit-のプレフィックスにはthis articleを参照してください。

一般的なフレックスバグの一覧と対応策についてはFlexbugsを参照してください。

はまた、このサイト上で、あります：

• Flexbox Tag Info

Answer 2

それは私表示のために動作します：-webkit-インラインボックス;サファリの