CSS Safari 中的 Flexbox：增长和缩小

Flexbox in Safari: Grow and shrink

提问by TwiNight

I am trying to make a cross-browser flexbox layout, to display cards positioned alongside one another. They should be left- or right-aligned (determined by "left" and "right" classes) when there is enough space for all cards, but shrink when there isn't. When shrinking, mouseover a card would make it shrink less, so that more of it can be viewed.

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

So much talk about this, live demo hereif you prefer.

说了这么多，如果您愿意，请在此处进行现场演示。

CSS:

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

So far I have successfully created the desired layout in lastest versions of IE, FF, Chorme and Opera.
However, I am running into problems with Safari. They layout depends on being able to specify different flexibilities for grow and shrink, but as far as I can tell, Safari does not support this.

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

Any help on growing and shrinking flexboxes in Safari is appreciated. I don't want to fallback to my old table-based layout as it tends to break in IE and FF.

任何有关在 Safari 中增大和缩小 flexbox 的帮助表示赞赏。我不想回退到我旧的基于表格的布局，因为它往往会在 IE 和 FF 中中断。

回答by cimmanon

Since the only Safari I have access to is version 5 for Windows, I can't confirm how this works in anything newer than that.

由于我唯一可以访问的 Safari 是 Windows 版本 5，因此我无法确认它在任何更新版本中的工作原理。

There's nothing you can do about the lack of support for flex-shrink and flex-grow as independent values. My advice would be to not use flex-shrink for this purpose but to use padding instead. You get almost the same effect in this particular instance, and it works in Safari 5:

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

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

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

You'll need to change the transition to padding, of course, but otherwise it looks like it works.

当然，您需要将过渡更改为填充，否则它看起来可以正常工作。