Safari中的Flexbox：增長和縮小

Question

我正在嘗試製作跨瀏覽器的Flexbox佈局，以顯示彼此並排放置的卡片。當所有卡片有足夠的空間時，它們應該左對齊或右對齊（由「左」和「右」類別確定），但當沒有足夠空間時縮小。縮小時，將鼠標懸停在卡上會使其縮小，從而可以查看更多內容。

這麼多談論這個，live demo here如果你願意。

CSS：

img{ 
    width:90px; 
    position: absolute; 
} 

.cards{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-flex-direction: row; 
    -webkit-justify-content: flex-start; 
    -ms-flex-direction: row; 
    -ms-justify-content: flex-start; 
    flex-direction: row; 
    justify-content: flex-start; 
} 
.cards.right{ 
    float: right; 
    -webkit-flex-direction: row-reverse; 
    -webkit-justify-content: flex-end; 
    -ms-flex-direction: row-reverse; 
    -ms-justify-content: flex-end; 
    flex-direction: row-reverse; 
    justify-content: flex-end; 
} 

.cards div{ 
    position:relative; 
    -webkit-flex: 0 2 90px; 
    -ms-flex: 0 2 90px; 
    flex: 0 2 90px; 
    -webkit-box-flex: 0 2 90px; 
    transition: flex-shrink .3s; 
    transition: flex-shrink .3s, -webkit-flex .3s; 
    -webkit-transition: -webkit-flex .3s; 
} 
.cards.left div:last-child, .cards.right div:first-child{ 
    -webkit-flex: 0 0 90px; 
    -ms-flex: 0 0 90px; 
    flex: 0 0 90px; 
    -webkit-box-flex: 0 0 90px; 
} 
.cards.left div:not(:last-child):hover, .cards.right div:hover+div{ 
    -webkit-flex: 0 1 90px; 
    -ms-flex: 0 1 90px; 
    flex: 0 1 90px; 
    -webkit-box-flex: 0 1 90px; 
} 

到目前爲止，我已經成功地創建在IE，FF，Chorme和Opera的最新的版本中所需的佈局。
但是，我遇到了Safari的問題。它們的佈局取決於能夠指定不同的靈活性來增長和縮小，但據我所知，Safari不支持這一點。

在Safari中增長和縮小flexboxes的任何幫助表示讚賞。我不想回退到舊的基於表格的佈局，因爲它往往會在IE和FF中破解。

Answer 1

由於我唯一可以訪問的Safari是Windows版本5，所以我無法確認這是如何在比這更新的任何工作。

沒有什麼可以做的，就是缺乏對flex-shrink和flex-grow作爲獨立值的支持。我的建議是不爲此目的使用flex-shrink，而是使用填充。你幾乎在這種特定情況下相同的效果，而且它在Safari 5的工作原理：

http://codepen.io/cimmanon/pen/oHzgr

img { 
    width: 90px; 
    position: absolute; 
} 

.cards { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-pack: start; 
    -moz-box-pack: start; 
    -webkit-flex-pack: start; 
    -ms-flex-pack: start; 
    -webkit-justify-content: flex-start; 
    justify-content: flex-start; 
} 

.cards.right { 
    float: right; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    -webkit-box-direction: reverse; 
    -moz-box-direction: reverse; 
    -webkit-flex-direction: row-reverse; 
    -ms-flex-direction: row-reverse; 
    flex-direction: row-reverse; 
    -webkit-box-pack: end; 
    -moz-box-pack: end; 
    -webkit-flex-pack: end; 
    -ms-flex-pack: end; 
    -webkit-justify-content: flex-end; 
    justify-content: flex-end; 
} 

.cards div { 
    position: relative; 
    max-width: 90px; 
    -webkit-box-flex: 2; 
    -moz-box-flex: 2; 
    -webkit-flex: 0 2 90px; 
    -ms-flex: 0 2 90px; 
    flex: 0 2 90px; 
    -webkit-transition: -webkit-flex .3s; 
    transition: flex-shrink .3s; 
    transition: flex-shrink .3s, -webkit-flex .3s; 
} 

.cards.left div:last-child, .cards.right div:first-child { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    -webkit-flex: 0 0 90px; 
    -ms-flex: 0 0 90px; 
    flex: 0 0 90px; 
} 

.cards.left div:not(:last-child):hover, .cards.right div:hover + div { 
    padding-right: 5%; 
} 

你需要過渡更改爲填充，當然，但除此之外，它看起來像它作品。