Comment empêcher le centrage des derniers éléments Flex lors de l'utilisation de Flexbox Wrap ?

Comment modifier l'habillage Flexbox

Dans ce scénario de boîte flexible réactive, les éléments flexibles sont progressivement enveloppés à mesure que la taille de l'écran diminue. Pour affiner le comportement d'habillage, nous allons explorer comment maintenir les derniers éléments flexibles non centrés, en commençant par la gauche :

Implémentation des éléments fantômes :

CSS peut être utilisé pour créer des éléments "fantômes" pour occuper l'espace restant sur la dernière ligne. Par exemple, en supposant une longueur de colonne potentielle de 4, nous aurions besoin de 3 éléments fantômes :

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

Pseudo-éléments :

Des pseudo-éléments peuvent également être utilisés, réduisant ainsi le nombre d'éléments fantômes nécessaires par 2 :

::after {
    content: "";
    flex: 1;
}

Modifié Exemple :

Voici une version mise à jour du code avec ces éléments fantômes ajoutés :

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

Avec ces améliorations, les éléments flexibles s'enrouleront comme vous le souhaitez, avec les 2 derniers éléments non centré et partant de la gauche.

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!