Comment puis-je obtenir des articles flexibles de même largeur même après leur emballage ?

Éléments flexibles de largeur égale même après leur emballage

Dans le domaine du positionnement CSS, obtenir des largeurs égales pour les éléments flexibles même après leur emballage peut présenter un défi. Flexbox, un module de mise en page puissant, ne parvient pas à fournir une solution native pour ce scénario.

Les implémentations actuelles de Flexbox n'ont pas la capacité d'aligner les éléments flexibles de manière uniforme dans la dernière ligne ou colonne. Cette limitation est inhérente à la spécification actuelle et reste non résolue.

Pour une analyse plus approfondie et des approches alternatives pour résoudre ce problème, reportez-vous à ces ressources pertinentes :

• [Sizing flex articles sur le dernier row](https://stackoverflow.com/questions/34259120/sizing-flex-items-on-the-last-row)
• [Est-il possible que les éléments flexibles s'alignent étroitement sur les éléments situés au-dessus d'eux ?](https://css-tricks.com/flexbox-tightly-align-last-row/)

Cependant, en dehors de flexbox, CSS Grid Layout offre une solution simple à ce problème :

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Avec cette solution CSS Grid, vous pouvez aligner sans effort des éléments flexibles de largeurs égales, même lorsqu'ils s'enroulent sur plusieurs lignes. .

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!