Maison  >  Article  >  interface Web  >  Comment contrôler l'habillage des éléments dans CSS Flexbox ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-10-30 09:22:03235parcourir

How to Control Element Wrapping in 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!

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