flex-wrap ne fonctionne pas comme prévu dans Safari

Sur la page d'accueil de http://www.shopifyexperte.de/ il y a deux flex-zone modules, l'un sous "Kundenstimmen" et sous "Nouvelles Beiträge...". Les boîtes intérieures sont censés envelopper quand ils descendent en-dessous de 220px et de ne pas pousser au-dessus de 30% de largeur. Cela fonctionne dans le dernier Chrome, FF et Opera (sur Mac), mais dans Safari 8.0.5 (Mac) et n'importe quel navigateur les boîtes de ne jamais former une suite, même si il ya assez de place. Ils ont toujours envelopper, chacun sur une ligne de sa propre.

Le CSS pour le conteneur:

CSS:

.homepage-testimonial-container {
	display: flex;
	display: -webkit-flex;
	-webkit-flex: 1;
	flex: 1;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	margin-top: 1em;
}

Le CSS pour les cases à l'intérieur du conteneur:

CSS:

.homepage-testimonial {
	margin-bottom: 1em;
	min-width: 220px;
	max-width: 30%;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}

Si je désactive -webkit-flex-wrap (effectivement le paramètre nowrap), toutes les cases de la ligne vers le haut en une ligne, mais finira par déborder le récipient lorsque la fenêtre du navigateur devient trop étroit.

Est-ce une sorte de bug dans Safari/Webkit ou suis-je en train de faire quelque chose de mal ici?

InformationsquelleAutor Tom Borowski | 2015-05-01
  1. 34

    Il semble que ce soit un bug dans Safari. Dans un autre domaine, j'ai testé en utilisant le min-width en place de auto dans les lignes où vous dites quelque chose comme -webkit-flex: 1 1 auto;.

    Cette question a peu d'info: https://stackoverflow.com/a/30792851/756329

    • Le bug semble être fermé juste un couple de jours, nous pouvons nous attendre un correctif dans la prochaine version de Safari.
    • il n'a pas beaucoup d'importance puisque vous avez encore à l'appui de +de 2 ans d'anciennes versions de navigateurs..
    InformationsquelleAutor Joseph Hansen
  2. 32

    Ensemble des éléments d'enfant, comme cela semble fonctionner pour moi

    flex: 1 0 auto;
    • C'est probablement parce que les dernières mises à jour de Safari, pour enfin avoir de travail correctement.
    • Ouais, Safari 9 à peu près flexbox de travail de même que chrome. Mais ce n'était pas le cas avec 8.
    • flex:1; fonctionne sur iOS 10.3.2, mais pas 10.2.2
    • Ne mettons pas la bande encore. C'est en 2017 et Safari a encore un long chemin à parcourir pour rattraper l'un de ses concurrents.
    InformationsquelleAutor socrateisabot
  3. 22

    J'ai eu un problème similaire dans Safari (9.1.3) avec le Bootstrap 3 système de grille (par exemple, col-md-4) en combinaison avec flex. Je l'ai résolu par la mise en margin: 0 -1px; sur le col éléments et flex-wrap: wrap; sur l'emballage.

    • Qui était-il, une seule ligne qui résout tout sous iOS. À mon avis, cette solution est la meilleure car elle conserve les propriétés de flex et de tout le reste intact, sans avoir à modifier votre conception d'ensemble et le tout avec min-width et d'autres choses.
    • Je pense qu'il a quelque chose à voir avec Safari arrondissement pixels sans décimales lors d'un calcul.
    • Ce fixe! Merci une tonne.
    InformationsquelleAutor eye-wonder
  4. 9

    Je suis à l'aide de Safari 11.0.1 et le bug persiste. J'utilise Bootstrap 3 combiné avec display: flex sur mon .les éléments de ligne. J'ai ajouté, à la suite de mon css pour cibler les éléments de colonne. Il semble y avoir quelque chose à propos de la largeur des pourcentages dans Safari qui ne sont pas honorés correctement.

    .row [class*=col-]{
    margin:0 -.3px;
}
    • J'ai juste rencontré ce problème précis (Safari 11, Bootstrap 3). Lorsque j'utilise display: flex et flex-wrap: wrap sur une ligne avec quatre colonnes, Safari n'affiche trois colonnes par ligne au lieu de quatre. Réglage négatif de la marge gauche/droite, comme indiqué ci-dessus il fixe.
    InformationsquelleAutor D3XT3R
  5. 8

    Réglage flex-basis: 20em fonctionne aussi, min-width: 20em ne pas.

    InformationsquelleAutor sidstumple
  6. 5

    C'est en effet un Safari bug. Les détails sont disponibles à l'excellent flexbugs page, mais le citer:

    Safari utilise min/max largeur/hauteur déclarations pour, en fait, rendu
    la taille de flex éléments, mais il ignore les valeurs lors du calcul de
    combien d'éléments doivent être sur une seule ligne d'un multi-ligne flex
    le conteneur. Au lieu de cela, il utilise simplement l'élément flex-base de la valeur, ou de ses
    largeur si le flex de base est réglé sur auto.

    Ainsi, le correctif /solution de contournement - comme suggéré par d'autres réponses ici - est de régler le flex-basis explicite de la largeur plutôt que auto.

    InformationsquelleAutor Nick F
  7. 2

    Je viens de croiser à nouveau cette question et ont utilisé le "flex-flow'. A travaillé comme un charme.

    .row {
    @include flex();
    @include flex-wrap();
    flex-flow: row;
}
    • meilleure solution de l'omi 🙂
    InformationsquelleAutor CS_student