Comment contrôler le retour à la ligne des éléments dans CSS Flexbox : puis-je forcer Flexbox à se retourner après un élément spécifique ?

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

Question :

Existe-t-il un moyen spécifier un élément après lequel le retour à la ligne doit avoir lieu dans une disposition flexbox ? Cela serait utile pour contrôler la réactivité d'une liste sans ajouter de balisage supplémentaire.

Réponse :

Bien qu'il n'y ait pas de propriété "flex-break" explicite dans le standard flexbox, vous pouvez obtenir cet effet en combinant les techniques suivantes :

1. Définissez "flex-wrap: wrap;" sur le conteneur :Cela permet aux éléments d'être renvoyés vers de nouvelles lignes si nécessaire.
2. Utilisez "flex-basis: 100%;" sur les éléments enfants après lesquels vous souhaitez rompre : Cela indique au navigateur de définir la largeur minimale de ces éléments à 100 %, les forçant ainsi à commencer sur une nouvelle ligne.

Exemple :

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

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

Dans cet exemple, les éléments de la liste seront renvoyés sur une nouvelle ligne après un élément sur deux (en fonction de l'espace disponible). En ajustant la valeur de "nth-child()", vous pouvez contrôler quels éléments provoquent le wrap.

Pour une démonstration plus complète, consultez le JSFiddle fourni : http://jsfiddle.net/theazureshadow/ww8DR /

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!