Envelopper les éléments dans Flexbox à des points spécifiques

Dans la disposition flexbox, la propriété flex-wrap permet aux éléments d'être renvoyés à la ligne suivante lorsque le la largeur du conteneur est dépassée. Cependant, il n'existe actuellement aucun moyen standard de spécifier quel élément doit déclencher le retour à la ligne.

Une solution de contournement pour forcer le retour à la ligne après un certain élément consiste à définir flex-basis sur 100 % pour cet élément dans une requête média ciblant le largeur spécifique. Cela force l'élément à occuper toute la largeur de son conteneur parent, brisant ainsi la ligne qui le suit :

/* Inside a media query targeting a specific width */
li:nth-child(2n) {
  flex-basis: 100%;
}

Par exemple, le CSS suivant encapsulera les éléments de la liste tous les deux éléments :

ul {
  display: flex;
  flex-wrap: wrap;
}

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

Cette méthode offre un moyen flexible de contrôler le comportement d'habillage sans nécessiter de balisage supplémentaire. Cependant, il est important de noter qu'il repose sur des requêtes multimédias, ce qui peut introduire une surcharge de performances et des limitations dans certaines situations.