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工作不正常

回答

相关问题