Comment obtenir un comportement cohérent du conteneur Flexbox à expansion horizontale dans tous les navigateurs ?

Conteneur Flexbox à expansion horizontale

Problème

Dans Flexbox, le comportement d'un conteneur avec un contenu encapsulé varie selon les navigateurs. IE 11 présente le comportement souhaité en étirant le conteneur horizontalement pour envelopper les éléments, tandis que Firefox et Chrome présentent des incohérences.

Solution

Bien que les navigateurs ne disposent pas d'une implémentation complète des conteneurs flexibles en colonnes, ils prennent bien en charge les modes d'écriture. En utilisant un conteneur flexible en ligne avec un mode d'écriture vertical, la direction en ligne du conteneur est permutée avec la direction du bloc. Les éléments flexibles circuleront verticalement et le mode d'écriture horizontal peut être restauré dans les éléments flexibles.

Exemple de code

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

Cette approche imite le comportement d'IE 11 en garantissant que le conteneur s'étire horizontalement. pour accueillir le contenu enveloppé dans Firefox et Chrome.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!