Maison > interface Web > tutoriel CSS > le corps du texte

Comment forcer le retour à la ligne des listes Flexbox à des positions spécifiques ?

Barbara Streisand
Libérer: 2024-10-31 03:15:31
original
265 Les gens l'ont consulté

How to Force Flexbox Lists to Wrap at Specific Positions?

Comment briser les listes Flexbox dans des positions spécifiques

Vous rencontrez une situation dans laquelle vous souhaitez briser les listes Flexbox à des positions spécifiques après certains éléments, améliorant la réactivité de votre mise en page. Bien que le standard flexbox ne prenne pas explicitement en charge cela, il existe une astuce que vous pouvez utiliser.

CSS Magic

Pour forcer le retour à la ligne après un élément particulier, ajoutez le CSS suivant au conteneur :

<code class="css">ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}</code>
Copier après la connexion

Ensuite, ajoutez ce CSS à l'élément après lequel vous souhaitez que le wrap se produise :

<code class="css">li:nth-child(4n) {
  flex-basis: 100%;
}</code>
Copier après la connexion

Où "4n" représente la position de l'élément dans la liste (par exemple, 4n signifie le quatrième élément, le huitième élément, etc.).

Exemple de code

Par exemple, considérons le balisage HTML suivant :

<code class="html"><ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul></code>
Copier après la connexion

Et le CSS qui l'accompagne :

<code class="css">ul {
    display: flex;
    flex-wrap: wrap;
}

li:nth-child(2n) {
    flex-basis: 100%;
}</code>
Copier après la connexion

Cette configuration forcera la liste à s'enrouler après un élément sur deux, ce qui donnera une mise en page réactive qui s'adapte aux différentes tailles d'écran.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal