Comment faire en sorte que les conteneurs Flexbox s'étendent horizontalement pour accueillir du contenu enveloppé ?

Comment les conteneurs Flexbox se développent horizontalement

Flexbox offre un contrôle nuancé sur la disposition et l'alignement des éléments de la page. L’un des défis consiste à faire en sorte que les conteneurs flexbox s’étendent horizontalement pour accueillir le contenu emballé. Les navigateurs présentent des comportements variables à cet égard, nécessitant des solutions spécifiques.

Considérez la grille d'images souhaitée :

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

Malgré la spécification du retour à la ligne des colonnes, Firefox limite la largeur du conteneur aux éléments de la première colonne, tandis que Chrome l'étend à la largeur du parent, quel que soit le contenu. Pour obtenir le comportement d'IE11, une approche alternative est nécessaire.

Exploiter les modes d'écriture

Les navigateurs prennent généralement bien en charge les modes d'écriture. Les modes d'écriture permettent d'échanger les directions de bloc et en ligne, permettant un flux vertical d'éléments flexibles. À l'intérieur des éléments flexibles, le mode d'écriture horizontal peut être restauré.

.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;
}

En définissant le mode d'écriture du conteneur sur vertical-lr et en appliquant writing-mode: horizontal-tb aux éléments flexibles, vous pouvez efficacement obtenir écoulement vertical et expansion horizontale. Cette solution s'aligne sur la prise en charge des modes d'écriture par le navigateur et répond aux exigences spécifiques liées aux conteneurs flexbox à expansion horizontale.

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!