Comment empêcher Flexbox Wrap de centrer les derniers éléments sur des écrans plus petits ?

Flexbox Wrap : personnalisation du placement des éléments

Dans Flexbox, contrôler le comportement d'emballage des éléments est crucial pour obtenir la disposition souhaitée. Pour résoudre le problème décrit dans la question, où les deux dernières cartes sont centrées au lieu de s'aligner vers la gauche lorsque l'écran se rétrécit, nous pouvons utiliser plusieurs techniques.

1. Éléments fantômes :

Une approche consiste à créer des éléments « fantômes » qui remplissent l'espace vide de la dernière ligne. Par exemple, si nous attendons un maximum de quatre colonnes, nous pouvons introduire trois div vides comme éléments fantômes. Cela garantit que les éléments s'enroulent à partir de la gauche, en s'alignant de manière égale sur plusieurs lignes.

2. Pseudo-éléments :

Une autre option consiste à exploiter les pseudo-éléments (:before et :after). L'ajout de divs vides avant et après les éléments réels réduit efficacement de deux le nombre d'éléments fantômes requis. Cette méthode évite également toute perturbation visuelle sur la dernière ligne.

Mise en œuvre :

Dans le code fourni, nous pouvons modifier le CSS comme suit pour obtenir le comportement souhaité :

.card {
  /* Styles for the card elements */
}

.card:empty {
  width: 300px; /* Width of empty card */
  box-shadow: none; /* Remove box-shadow for empty cards */
  margin: 2rem; /* Keep empty cards aligned with actual cards */
  padding-bottom: 0; /* Remove padding for empty cards */
}

.recipe-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

Dans le HTML, nous ajoutons les éléments fantômes nécessaires :

<div class="container">
  <div class="recipe-grid">
    <!-- Actual card elements -->
    <div class="card">
      <!-- Card content -->
    </div>
    <!-- ... more card elements -->
    
    <!-- Ghost elements -->
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

Cette approche garantit que les cartes s'enroulent à partir de la gauche, en commençant sur une nouvelle ligne chaque fois que la largeur de l'écran l'exige il. Les éléments fantômes occupent l'espace restant sur la dernière ligne, alignant les cartes uniformément sur plusieurs rangées.

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!