Flexbox在Safari瀏覽器中仍然參差不齊，flex-wrap工作不正常

我已經閱讀論壇尋找答案，但仍然沒有任何效果。我在我的網站上使用CSS3 flexbox樣式作爲頁腳。 HTML如下：Flexbox在Safari瀏覽器中仍然參差不齊，flex-wrap工作不正常

<footer class="footer" role="contentinfo"> 

      <!-- copyright --> 
      <div id="box1" class="box"> 
       <a class="btn" id="btn-donate" href="#">Donate</a> 
       <a class="btn" id="btn-news" href="#">Get News</a> 
      </div> 
      <div id="box2" class="box"> 
       <h2>Quill Theatre</h2> 
       <p>P.O. Box 7265<br> 
       Richmond, VA 23221</p> 
       <p>[email protected]<br> 
       804.340.0115</p> 
       <span>Social goes here</span> 

      </div> 
      <div id="box3" class="box">3</div> 
      <!-- /copyright --> 

</footer>

而我的CSS如下......它有點髒BC我一直在嘗試了一堆東西的工作：

.footer { 
    display: flex; 
    display: -webkit-flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
    flex-wrap: wrap; 
    -webkit-flex-wrap: wrap; 
    -webkit-flex-flow: row wrap; 
    width: 100%; 
} 
.footer .box { 
    order: 1; 
    min-width: 50%; 
    flex: 1 1 auto; 
    -webkit-flex: 1 1 auto; 
    flex-shrink: 1; 
    flex-basis: auto; 
    -webkit-flex-shrink: 1; 
    -webkit-flex-basis: auto; 
} 
.footer #box2 { 
    order: 0; 
    min-width: 100%; 
    flex: 2 2 auto; 
    -webkit-flex: 2 2 auto; 
    -ms-flex: 2 2 auto; 
    text-align: center; 
    border-top: 3px solid black; 
    border-bottom: 3px solid black; 
    padding-bottom: 2em; 
} 
.footer #box2 h2 { 
    text-transform: uppercase; 
}

這在所有的瀏覽器工作正常，除Safari之外 - 包裝不會發生。我在這裏錯過了什麼，不允許包裝？

來源

2015-04-28 la1ch3

哪個版本的Safari？ – cimmanon

最新版本，8.0.4。之後，我調整了我的前綴，並將所有內容都推送到了一行，但Safari上仍然沒有發生任何包裝。 – la1ch3

我不期望它在這裏有所作爲，因爲Safari仍然被列爲需要前綴，但是您的前綴不應該是最後一個。通過指定柔性方向，柔性包裝和柔性流動，您也會變得多餘。 – cimmanon

只是任何人都納悶：

我有辦法可以太多前綴會在其上擺脫Safari瀏覽器的WebKit。我能夠通過使用正確的Flexbox規則（例如，使用flex作爲簡寫，而不是聲明flex-grow或flex-shrink）並使用Autoprefixer來處理供應商前綴來解決此問題。

來源

2015-07-13 13:34:12 la1ch3

對於任何遇到類似問題的人。

我的Flex內嵌列表佈局在Chrome上運行良好，但是換行在Safari上無法使用。

我在li上有min-width: 25%。一旦我刪除它在Safari上正確顯示。

來源

2016-07-25 00:24:54

Flexbox在Safari瀏覽器中仍然參差不齊，flex-wrap工作不正常

回答

相關問題