Safari dışındaki tüm tarayıcılarda çalışan Flexbox kodu. Niye ya?

Question

Liste etiketli kılavuz sütunları, her ek HTML listesi öğesi için otomatik genişlik etkinleştirildiğinde, her 3 sütun için doğru sırayla göstermem gerekir.

<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>

Bu defa denedim budur ve bunu eklemek sürece kesinlikle diğer her tarayıcıda ince ama Safari tarayıcısı ile uyumlu değildir çalışır: display: -webkit-flex;

Bu benim örnektir.

böyle çıktı dönüştürmek istiyorum:

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

Ben bu Safari tarayıcısı için çalışan şimdiye kadar ben bu sorunu çözmek için cant, yardıma :)

mülk olur olsun önemli

Testi linki:

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

Answer 1

flexbox'a bir CSS3 teknolojisidir. Bu, nispeten yeni olduğu ve bazı tarayıcıların esnek özellikler için tam destek sağlamadığı anlamına gelir.

• IE 8 ve 9 destek flexbox'a yok:

  İşte halsiz. Bu tarayıcılarda esnek özellikler kullanmak istiyorsanız, zamanınızı harcamayın. flexbox polyfill bir süreliğine turlar yaptı, ancak iyi çalışmadı ve artık sürdürülmedi.

• IE 10, previous version of flexbox numaralı telefonu destekler ve vendor prefixes gerektirir. Geçerli özellikten belirli özelliklerin IE10'da desteklenmediğini unutmayın (örneğin, flex-grow, flex-shrink ve flex-basis). Flexbox 2012 Property Index'a bakın.

• IE 11 iyi, ama buggy. current flexbox standard dayanmaktadır. Bazı problemler için this page'daki BİLİNEN HUSUSLAR sekmesine bakın. Ayrıca bakınız: flex property not working in IE Chrome, Firefox ve Edge ile

• Eğer her yerinde iyi. Küçük hatalar ve tutarsızlıklar bulacaksınız, ancak genellikle kolay düzeltmeler vardır. Bazen boyutlandırma ve kaydırma çubuğu sorunlarına neden olan Implied Minimum Flex Sizing'un farkında olmanız gerekir.

• Safari sürümleri 9 ve üstü, önekler olmaksızın geçerli flexbox teknik özelliklerini destekler. Ancak eski Safari sürümleri, -webkit- öneklerini gerektirir. Bazen min-width ve max-width, flex eşdeğerleri ile çözülebilen hizalama sorunlarına neden olur. Birçok (şart olmamakla birlikte tümü) satıcı önekleri Autoprefixer kullanmak eklemek için hızlı bir yol için http://caniuse.com/#search=flex

  : bu sayfayı görmek, FlexBox tarayıcı desteği tam inceleme için Flex items not stacking properly in Safari

bakınız.Safari için, bazı önek jeneratörlerinin içermediği -webkit- önekler için this article'a bakın.

Genel esnek hataların ve bunların çözümlerinin bir listesi için bkz. Flexbugs.

Ayrıca

, bu sitede, var:

• Flexbox Tag Info

Answer 2

Benim için ekranı çalışır: -webkit-inline-box; Safari'de.