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%; 
} 

你需要过渡更改为填充，当然，但除此之外，它看起来像它作品。