working - wrap css




Row Wrap in flex-box ne pas emballer dans Safari (3)

Ceci est un bug de Safari IOS. La solution / solution de contournement consiste donc à définir la base flexible sur une largeur explicite plutôt que sur auto pour l'élément enfant.

Un conteneur flexible a quatre enfants, chacun avec une base flexible de 25% et une largeur minimale. flex-flow est défini pour le ramassage en ligne. Les navigateurs autres que Safari s'en chargent comme prévu: si la largeur minimale est atteinte, l'élément suivant est placé dans la ligne suivante. Dans Safari, il déborde du conteneur.

Voir la démo ici: http://codepen.io/lbilharz/pen/aJbkI

JADE

h1 Why this ain't wrappin' in mobile-safari?
  .flex
    for i in ['one','two','three','four']
      .item
        h2=i

Style

.flex
  display flex
  flex-wrap wrap
  flex-direction row
  padding 1em
  background lightyellow
  .item
    flex 1 0 25%
    padding 1em
    box-sizing border-box
    min-width 15em

Des idées?


Certains navigateurs ne supportent pas complètement tous les éléments CSS3. Essaye ça:

  display:-webkit-box;
  display:-webkit-flex;
  display:-webkit-flexbox;
  display:-moz-flex;
  display:-moz-box;
  display:-ms-flexbox;
  display:flex;

Par un commentaire sur bugs.webkit.org , il semble que la solution soit simple!

Si ton style est

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1;
    flex: 1;
}

vous devez simplement ajouter plus de clarté à votre déclaration flex . En fait, je pense qu’une seule ligne doit changer comme

div.flex {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: row;
    flex-direction: row;
}
div.flex .item {
    min-width: 15em;
    -webkit-flex: 1 1 15em; /* this */
    flex: 1;
} 




flexbox