Comment puis-je contrôler le wrapping Flexbox impair sur la dernière ligne ?

Comment contrôler le comportement d'emballage de Flexbox

Le problème

Lors de la création de mises en page flexibles réactives, vous pouvez rencontrer des cas où les derniers éléments s'enroulent bizarrement, laissant trop d'espace sur la ligne précédente. Par exemple, dans une grille de cartes dont le rendu est dynamique en fonction des appels d'API, vous souhaitez que les deux dernières cartes s'enroulent sur le côté gauche, en vous assurant qu'elles s'alignent sur les précédentes au lieu d'être centrées.

La solution

Vous pouvez modifier le comportement d'habillage de la flexbox via CSS pour obtenir l'alignement souhaité. Deux approches courantes incluent :

Utiliser des éléments « fantômes »

Créer des éléments « fantômes » sans contenu visible. Ces éléments remplissent efficacement la dernière ligne, poussant les cartes suivantes vers la ligne suivante. Le nombre d'éléments « fantômes » correspond à la longueur de colonne prévue.

Par exemple, pour une longueur de colonne potentielle de 4, vous auriez besoin de 3 éléments « fantômes ». Utilisation de CSS :

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

Utilisation du pseudo-élément ::after

Vous pouvez également utiliser le pseudo-élément CSS ::after. Cette approche diminue le nombre d'éléments « fantômes » requis.

.card::after {
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
}

Ce pseudo-élément agit comme un espace réservé, remplissant l'espace restant sur la dernière ligne.

En implémentant l'un ou l'autre des Ces techniques, vous pouvez ajuster le comportement d'enroulement de votre disposition flexbox, en vous assurant que les derniers éléments s'alignent correctement, quelle que soit la taille de l'écran ou le nombre de cartes rendues.

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!