Comment agrandir horizontalement un conteneur Flexbox pour emballer le contenu ?

Comment étendre le conteneur Flexbox horizontalement pour emballer le contenu ?

Lors de l'utilisation de CSS flexbox, les navigateurs présentent des comportements variables, en particulier dans le contexte du redimensionnement des conteneurs. Pour résoudre cette incohérence, nous recherchons une solution pour qu'un conteneur flexbox s'étende horizontalement pour s'adapter à son contenu enveloppé.

Dans certains scénarios, il peut être nécessaire qu'un conteneur englobe plusieurs éléments div disposés dans une disposition en colonnes. L'objectif est de permettre à ces éléments de circuler verticalement, en s'enroulant lorsqu'ils atteignent le bas, ce qui donne lieu à des colonnes de texte ou d'images. Cependant, contrôler l'expansion horizontale du conteneur pour qu'elle corresponde aux éléments enveloppés reste un défi.

Pour obtenir le comportement souhaité, il est possible de tirer parti d'un conteneur flexible en ligne avec un mode d'écriture vertical. Ce faisant, les directions en ligne et en bloc sont inversées, provoquant un flux vertical des éléments flexibles. Par conséquent, le mode d'écriture aligné est inversé au sein des éléments flex, rétablissant l'alignement horizontal.

Pour une démonstration pratique, considérez l'extrait de code suivant :

.container {
  display: inline-flex;
  writing-mode: vertical-lr; /* Reverses inline and block directions */
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}

.photo {
  writing-mode: horizontal-tb; /* Restores horizontal alignment */
  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>

Grâce à cette technique , le conteneur s'étendra dynamiquement horizontalement à mesure que du nouveau contenu est ajouté, garantissant un emballage et un alignement corrects des éléments individuels.

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!