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

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!