Comment étendre horizontalement un conteneur Flexbox avec du contenu enveloppé dans les navigateurs ?

Agrandissement horizontal des conteneurs Flexbox avec du contenu enveloppé

Flexbox offre une solution puissante pour créer des mises en page flexibles. Cependant, des divergences dans les comportements des navigateurs peuvent survenir, entraînant des résultats inattendus. Un de ces problèmes apparaît lorsque l'on tente de développer horizontalement un conteneur flexbox avec son contenu encapsulé.

Considérez le code HTML et CSS suivant :

<div class="container">
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>

.container {
  display: inline-flex;
  flex-flow: column wrap;
  align-content: flex-start;
  height: 100%;
}

Ce code vise à créer un grille d'images qui coulent de haut en bas, s'enroulant lorsqu'elles atteignent le bas. Cependant, les comportements du navigateur varient :

• IE 11 : Le conteneur se développe pour accueillir les éléments encapsulés avec succès.
• Firefox : Encapsule uniquement le premier colonne d'éléments, avec d'autres débordants.
• Chrome : Conteneur toujours remplit la largeur de son parent.

Pour obtenir le comportement souhaité dans d'autres navigateurs, envisagez d'utiliser un conteneur flexible de lignes avec mode d'écriture vertical.

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

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

En échangeant la direction du bloc avec la direction en ligne, les éléments flexibles circulent verticalement. La restauration du mode d'écriture horizontal à l'intérieur des éléments flex complète la solution. Cette technique permet de créer des conteneurs flexbox qui s'étendent horizontalement pour correspondre au contenu de leur retour à la ligne de colonne de manière cohérente dans tous les navigateurs.

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!