Comment contrôler l'habillage des éléments dans CSS Flexbox ?

Contrôle d'habillage d'élément flexible dans CSS Flexbox

La nécessité de spécifier un élément après lequel les éléments CSS flexbox doivent être enveloppés n'est pas directement abordée dans le norme de boîte flexible. Cependant, une technique astucieuse peut être utilisée pour obtenir cet effet.

Pour forcer l'enroulement après un élément spécifique, suivez ces étapes :

1. Définir l'affichage : flex ; et flex-wrap : enveloppe ; sur l'élément conteneur.
2. Sur l'élément après lequel vous souhaitez envelopper, définissez flex-basis: 100%;.

Cette solution définit effectivement une largeur minimale pour l'élément, provoquant pour qu'il passe à sa propre ligne si nécessaire.

Par exemple, considérons le balisage suivant :

<code class="html"><ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul></code>

Et le CSS suivant :

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

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

Cela provoquera les éléments à envelopper après le quatrième élément, en créant deux lignes :

1 2
3 4

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!