Maison  >  Article  >  interface Web  >  Comment forcer le retour à la ligne des listes Flexbox à des positions spécifiques ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-10-31 03:15:31195parcourir

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>

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>

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>

Et le CSS qui l'accompagne :

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

li:nth-child(2n) {
    flex-basis: 100%;
}</code>

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!

Déclaration:
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