Comment obtenir une expansion horizontale cohérente pour les éléments flexibles enveloppés dans les navigateurs ?

Conteneur flexible à expansion horizontale pour le contenu enveloppé

Lors de l'utilisation de CSS Flexbox, les navigateurs peuvent présenter des comportements différents pour certaines propriétés. En particulier, créer une grille d'images disposées en colonnes et leur permettre de s'enrouler peut présenter des difficultés pour obtenir un comportement cohérent dans tous les navigateurs.

Considérez le code HTML 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>

Et le code HTML qui l'accompagne :

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

CSS :

• L'objectif est que le conteneur s'étende horizontalement pour accueillir les éléments enveloppés, offrant ainsi une disposition en forme de grille avec des colonnes d'images. Cependant, comme vous pourriez le constater dans un jsFiddle fourni, les comportements du navigateur diffèrent :
• IE 11 : Le conteneur se développe horizontalement, enveloppant chaque colonne d'éléments.
• Firefox : Seule la première colonne d'éléments est enveloppée, avec le reste débordement.

Chrome :

Le conteneur s'étire toujours pour remplir la largeur de son parent.

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

Pour résoudre cette incohérence et obtenir le comportement observé dans IE 11, implémentez la solution suivante :

Cette approche utilise un conteneur flexible en ligne avec un mode d'écriture vertical. En échangeant les directions de bloc et en ligne, les éléments flexibles sont obligés de circuler verticalement. Les modes d'écriture au sein des éléments flexibles individuels sont ensuite réinitialisés à l'horizontale. En conséquence, le conteneur s'agrandira horizontalement pour correspondre au contenu encapsulé, imitant le comportement observé dans IE 11.

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!