Css Safari中的Flexbox：增长和收缩

我正在尝试制作一个跨浏览器的flexbox布局，以显示彼此并排放置的卡片。当有足够的空间容纳所有卡片时，它们应该左对齐或右对齐（由“左”和“右”类确定），但当没有足够的空间时，它们应该缩小。缩小时，将鼠标移到卡上会使卡缩小得更少，以便可以看到更多的卡

如果你愿意的话，我们可以谈很多

CSS:

到目前为止，我已经成功地在IE、FF、Chorme和Opera的最新版本中创建了所需的布局。
但是，我在Safari上遇到了问题。它们的布局取决于能够为增长和收缩指定不同的灵活性，但据我所知，Safari不支持这一点

---

感谢您在Safari中对FlexBox的增长和收缩提供的任何帮助。我不想回到我以前的基于表格的布局，因为它倾向于在IE和FF中中断。

因为我唯一可以访问的Safari是Windows版本5，我无法确认它在比它更新的版本中是如何工作的

对于缺乏对flex shrink和flex grow作为独立值的支持，您无能为力。我的建议是不要为此使用flex shrink，而是使用填充。在这个特定的实例中，您可以获得几乎相同的效果，并且在Safari 5中也可以使用：

---

当然，您需要将过渡更改为填充，但在其他情况下，它看起来很有效。

如果我可以专门针对Safari，那就太好了，但它在所有浏览器中都有效。干杯！我把这个（.cards）放到.flex中，然后我就可以在我的sass（scss）中@extend.flex了！工作就像一个符咒：）

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

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