Comment empêcher le centrage des éléments Flexbox sur des lignes incomplètes ?

Comment empêcher les éléments Flexbox de se centrer sur des lignes brisées ?

Dans Flexbox, si vous avez un conteneur flexible avec des éléments qui ne rentrent pas uniformément sur une ligne dans sa largeur, les éléments restants sur cette ligne sont centrés. Mais que se passe-t-il si vous souhaitez que les éléments restants commencent à gauche et aient un espacement égal, tout comme les éléments sur des lignes complètes ?

Solution : utiliser des éléments « fantômes »

Sans utiliser JavaScript, vous pouvez créer des éléments vides (appelés éléments « fantômes ») qui remplissent l'espace restant sur la ligne incomplète.

Par exemple, si la longueur potentielle de colonne de votre conteneur est de 4, vous en aurez besoin de 3. éléments fantômes. Vous pouvez les ajouter à la fin de votre HTML :

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

CSS mis à jour :

.card:empty {
    width: 300px;
    box-shadow: none;
    margin: 2rem;
    padding-bottom: 0;
}

Cela garantit que les éléments fantômes occupent le même espace que le cartes réelles.

Utilisation de pseudo-éléments

Vous pouvez également utiliser des pseudo-éléments CSS pour réduire le nombre d'éléments fantômes nécessaires :

.card:empty::before {
    content: "";
    width: 300px;
    box-shadow: none;
    margin: 2rem;
}

Ceci crée un pseudo élément pour chaque carte vide qui prend sa place sur la ligne incomplète. En remplaçant 2 éléments fantômes par 2 pseudo-éléments, vous n'avez besoin que d'un seul élément fantôme réel pour une longueur de colonne de 4.

Exemple de code :

<div class="container">
  <div class="recipe-grid">

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card">
      <!-- Card content -->
    </div>

    <div class="card"></div> <!--- Ghost element -->

  </div>
</div>

En utilisant Éléments fantômes ou pseudo-éléments, vous pouvez empêcher les éléments Flexbox de se centrer sur des lignes incomplètes et assurer un arrangement plus agréable visuellement.

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!