Comment forcer deux lignes de quatre éléments chacune à l'aide de Flexbox lors du redimensionnement dynamique de huit éléments ?

Mise en page Flexbox : 4 éléments par ligne

Lorsque vous utilisez Flexbox pour redimensionner dynamiquement 8 éléments sur la page, comment forcer leur division en deux rangées (4 par rangée) ?

Étant donné l'extrait de code suivant :

<div class="parent-wrapper">
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}

.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}

.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

Solution :

Le problème vient du flex-wrap : envelopper sur le flex conteneur , qui permet aux éléments de s'enrouler. Cependant, flex-grow: 1 permet une croissance illimitée des éléments, ce qui les empêche de s'enrouler lorsqu'ils manquent d'espace.

La solution est de définir une largeur pour l'élément, en le forçant à s'enrouler :

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* 展开说明如下 */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

La première valeur de la propriété flex (1 dans notre exemple) distribue l'espace uniformément à tous élément, la deuxième valeur (qui est 0) définit la largeur minimale à 0 et la troisième valeur (qui est 21 %) définit la largeur maximale de l'élément à 21 % de la largeur disponible. En le configurant ainsi, les éléments s'enrouleront avant d'atteindre la largeur maximale, créant ainsi une disposition de 4 éléments par ligne.

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!