Flexbox-in Safari: Wachsen und schrumpfen

Ich versuche, eine cross-browser flexbox-layout, display-Karten positioniert, neben einander. Sie sollte Links - oder Rechtsbündig (bestimmt durch "Links" und "rechts" - Klassen), wenn dort ist genug Platz für alle Karten, aber schrumpfen, wenn gibt es nicht. Wenn schrumpfen, mouseover eine Karte machen würde, es schrumpft weniger, so dass es angezeigt werden kann.

So viel darüber reden, live-demo hier, wenn Sie bevorzugen.

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

Bisher habe ich erfolgreich erstellt das gewünschte layout in den neuesten Versionen von IE, FF, Chorme und Oper.

Allerdings habe ich Probleme mit Safari. Sie layout hängt davon ab, können Sie verschiedene Spielräume für wachsen und schrumpfen, aber soweit ich das beurteilen kann, Safari unterstützt dies nicht.

Jede Hilfe zu wachsenden und schrumpfenden flexboxes in Safari geschätzt wird. Ich will nicht fallback auf meine alten Tabellen-layout, wie es dazu neigt zu brechen, im IE und FF.

InformationsquelleAutor TwiNight | 2013-04-21

  1. 7

    Da nur Safari habe ich Zugang zu der version 5 für Windows, kann ich nicht bestätigen, wie das funktioniert in etwas neuer als das.

    Es nichts, was Sie tun können, über den Mangel an Unterstützung für flex-shrink und flex-wachsen, als eigenständige Werte. Mein Rat wäre, nicht zu verwenden, flex-shrink für diesen Zweck aber zu verwenden, Polsterung statt. Sie bekommen fast den gleichen Effekt, in diesem Fall, und es funktioniert in 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%;
}

    Müssen Sie zum ändern der übergang zur Polsterung, natürlich, aber sonst sieht es aus wie es funktioniert.

    Wäre toll, wenn ich den Gegner Safari spezifisch, aber es funktioniert in allen Browsern sowieso.
    Cheers Mann! Ich habe dieses (.Karten) und legen Sie es in .flex, dann kann ich nur @extend .flex in meinem sass (scss)! Funktioniert wie ein Charme 🙂

    InformationsquelleAutor cimmanon

Schreibe einen Kommentar