web-dev-qa-db-fra.com

La Flexbox enveloppe la dernière colonne de la première ligne de Safari

La dernière colonne de la première ligne est renvoyée à la ligne suivante lors de l'affichage dans Safari et certains autres navigateurs basés sur iOS.

Safari:

 enter image description here

Chrome/Autres:

 enter image description here

Code:

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

csstwitter-bootstrapcss3twitter-bootstrap-3flexbox
51
DN.

Juste pour mettre à jour ma question

C’est la solution à laquelle je vais, ceci est évidemment résolu pour Bootstrap4, qui est compatible avec flexbox. Donc, cela ne concerne que bootstrap3.

.row.flexthis:after, .row.flexthis:before{
  display: none;
}
9
DN.

Explication

Cela est dû au fait que Safari traite les pseudo-éléments avant et: après comme s'il s'agissait d'éléments réels. Par exemple. Pensez à un conteneur de 7 objets. Si le conteneur a: avant et: après, Safari positionnera les éléments comme suit:

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

Solution

En guise d'alternative à la réponse acceptée, je supprime: before &: after des conteneurs flex au lieu de modifier le code HTML. Dans ton cas:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}
109
Taylan

Je sais que le problème est assez ancien, mais je l’ai rencontré aujourd’hui et j’ai perdu plus de 12 heures à le régler. Environ 10 heures de cela ont été consacrées à réaliser que safari échouait avec une grille de démarrage à 12 colonnes, et ce n’est pas un autre problème.

La solution que j'ai faite est plutôt simple. Voici la version pour Visual Composer. Les noms de classe peuvent varier pour d'autres cadres.

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}
5
Gaurav

Je ne voulais pas ajouter plus de classes pour résoudre ce type de bogue, alors vous pouvez également réparer la classe .row.

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
}
3
Joeri Wauters

Nous avons trouvé ce problème en essayant de créer une grille simple en utilisant Bootstrap pour le TwentyThree CMS, et nous avons eu le même bug dans Safari. Quoi qu'il en soit, cela a résolu pour moi:

.flex-container:before {
  display: inline;
}
2
user5373314

Bootstrap 4 a des problèmes avec display: block; Cette propriété est définie à partir de CSS ou de JavaScript sur la classe .row. J'ai imaginé une solution pour cela Créez simplement une classe comme:

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

Et appliquez ensuite cette classe lorsque vous souhaitez afficher la ligne.

1
Farhan

J'ai pu le réparer en ajoutant

.row:before, .row:after {
display: flex !important;
}

Évidemment, ce n'est pas la solution la plus élégante, mais cela peut fonctionner pour certains jusqu'à ce qu'ils la réparent.

0
ashamun

J'ai eu le même problème et la réponse a été que Flex Box sur Safari ne semble pas aimer que les flotteurs soient effacés sur le même div que display: flex. 

0
Cam Tullos
.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}
0
Enot

J'ai également passé quelques heures à ce sujet. Dans mon cas, j’ai inséré flexbox dans un projet existant pour que tous les éléments de la variable row aient la même hauteur. Tous les navigateurs, à l'exception de Safari, l'ont rendu correctement, mais aucune des réponses ci-dessus n'a semblé résoudre mon problème.

Jusqu'à ce que je découvre qu'il y avait toujours un Bootstrapclearfix hack utilisé: (Le code provient d'un projet laravel , mais Bootstrap générique sinon)

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @endif

    etc...
@endforeach

Apparemment, d'autres navigateurs que Safari ignorent le .clearfix d'une manière ou d'une autre lorsque la flexbox est utilisée.

Ainsi, lorsque vous utilisez flexbox sur vos colonnes, vous n'avez plus besoin d'utiliser le clearfix de Bootstrap.

0
McVenco