Maison > Article > interface Web > Comment forcer un emballage cohérent des cartes rendues dynamiquement dans Flexbox ?
Dans ce scénario, vous disposez d'une boîte flexible réactive avec des cartes rendues dynamiquement que vous souhaitez envelopper d'une manière spécifique. Voyons comment cela peut être réalisé :
Pour obtenir le comportement souhaité, vous pouvez utiliser la technique consistant à utiliser des éléments "fantômes" à côté de vos cartes habituelles. Ces éléments « fantômes » sont des divs vides ajoutés à la fin du conteneur flexbox. Leur but est d'occuper visuellement l'espace restant et de guider le mécanisme d'emballage de la flexbox.
Par exemple, si vous souhaitez avoir une longueur de colonne possible de 4, vous aurez besoin de 3 éléments "fantômes". Ces éléments imiteraient la largeur et l'espacement de vos cartes habituelles, garantissant que les 2 dernières cartes commencent par le côté gauche et soient réparties de manière égale.
<div class="recipe-grid"> <!-- Regular cards --> <div class="card">...</div> <div class="card">...</div> <div class="card">...</div> <div class="card">...</div> <!-- "Ghost" elements --> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div>
Dans votre CSS, assurez-vous que les éléments « fantômes » ont les éléments suivants style :
.card:empty { width: 300px; <!-- Same width as regular cards --> box-shadow: none; margin: 2rem; padding-bottom: 0; }
Vous pouvez également utiliser des pseudo-éléments CSS pour créer l'effet d'éléments « fantômes ». Cette technique vous permet d'éviter d'utiliser des divs supplémentaires dans le HTML.
.card:nth-child(n+5) { <!-- Applies to all elements after the 4th child --> width: 300px; <!-- Same width as regular cards --> box-shadow: none; margin: 2rem; padding-bottom: 0; }
Cette méthode crée efficacement des espaces "fantômes" vides après la 4ème carte, obtenant un résultat visuel similaire à l'approche des éléments "fantômes". Cependant, il est important de noter que cette technique peut ne pas être prise en charge par tous les navigateurs.
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!