Comment aligner à gauche la dernière ligne dans une mise en page Flexbox ?

Alignement de la dernière ligne à gauche dans Flexbox

Flexbox est un outil de mise en page puissant qui permet une organisation polyvalente du contenu. Cependant, lorsqu’il s’agit de boîtes flexibles à plusieurs lignes, maintenir l’alignement peut être difficile. Cet article aborde le problème de l'alignement à gauche de la dernière ligne/ligne dans flexbox, garantissant une disposition cohérente de type grille.

Le problème survient lorsque la dernière ligne ne contient pas le même nombre d'éléments que les autres lignes, provoquant un centrage et une rupture de l'effet de grille. Pour résoudre ce problème, une solution utilisant des éléments de remplissage d'espace vides stratégiquement placés est proposée.

Dans le HTML, créez trois divs vides avec la classe "filling-empty-space-childs". Ces éléments doivent avoir une largeur égale à la largeur des éléments enfants et une hauteur de 0. Ces éléments jouent un rôle crucial dans l'alignement de la dernière ligne à gauche.

Le conteneur flexbox doit avoir les propriétés suivantes :

• affichage: flex
• flex-wrap: wrap
• justify-content: space-around

En fonction du nombre de éléments de la dernière ligne, les éléments vides remplissant l'espace s'effondrent dans une nouvelle ligne, restant invisibles, garantissant que la dernière ligne reste alignée à gauche.

Voici un exemple :

<code class="html"><div class="container">
  <div class="item"></div>
  <div class="item"></div>
  ...
  <div class="item"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
  <div class="filling-empty-space-childs"></div>
</div></code>

<code class="css">.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.item {
  width: 130px;
  height: 180px;
  background: red;
  margin: 0 1% 24px;
}

.filling-empty-space-childs {
  width: 130px;
  height: 0;
}</code>

En implémentant cette technique, la dernière ligne/rangée sera alignée à gauche, préservant l'effet de grille souhaité même lorsqu'elle contient un nombre d'éléments différent de celui des autres 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!