Flexbox無法在iPad和Safari上工作

我在網站上使用flexbox，並在iPad Air，iPad 3和Safari PC上崩潰。Flexbox無法在iPad和Safari上工作

設計和代碼與此codepen相似。 http://codepen.io/anon/pen/xwJzEg/

display: flex; 
flex-wrap: wrap;

這是它的外觀發生問題在這些設備上：

任何意見，如何解決這個？

來源

2015-11-03 Chriss

您可能需要考慮Safari瀏覽器對flexbox的支持。

儘管Safari 9支持所有標準的flex屬性，但對於Safari 8及更高版本，您需要使用供應商前綴。

做此調整來代碼：

.container { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    display: -webkit-flex; /* NEW */ 
    display: flex; 
    -webkit-flex-wrap: wrap; /* NEW */ 
    flex-wrap: wrap; 
    font-family: "Open Sans"; 
}

見Flexbox的瀏覽器支持瀏覽：http://caniuse.com/#search=flexbox

考慮使用Autoprefixer。

見Flexbox的代碼樣本前綴：The Ultimate Flexbox Cheat Sheet

來源

2015-11-03 15:24:57

我最大的問題是最新的瀏覽器（Chrome和Safari）上的Ipad 3和Ipad Air – Chriss

究竟發生了什麼？你能發佈一個問題的圖像或更多的細節？ –

在問題中張貼截圖。 – Chriss

您是否嘗試過的第一個孩子和最後子li元素設置彈性值？我發現如果沒有Flex容器中的flex-items具有flex值，那麼iPad可能會感到困惑。例如：

.container li:first-child { 
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1; 
} 
.container li:nth-child(4) { 
    flex:1; 
    -webkit-box-flex:1; 
    -webkit-flex:1; 
}

來源

2016-07-27 21:41:54 user3487028

我按照答案中的建議使用了Autoprefixer。

我在編寫SASS時使用gulp來處理這個問題。這是一個guide。

這裏的答案建議在沒有前綴的前面使用前綴屬性。我同意一個小小的更正。

.container { 
    display: -webkit-flex; 
    -webkit-flex-wrap: wrap; 
    display: flex; 
    flex-wrap: wrap; 
}

理想情況下，你需要列出所有的前綴屬性你開始使用非前綴的問題之前。 @Michael_B答案在我看來並不完美。

我希望人們會覺得這很有用。

來源

2017-01-02 10:57:54

Flexbox無法在iPad和Safari上工作

回答

相關問題