Flex-items over regels verdelen

flex-wrap bepaalt of flex-items op één regel moeten blijven of over meerdere regels mogen worden verdeeld. Met wrap sta je nieuwe regels toe. De beschikbare breedte en de afmetingen van de items bepalen vervolgens waar de afbreking plaatsvindt.

Afbreken geeft niet automatisch overal gelijke kaarten. Eigenschappen van de items, zoals flex-basis en groeien of krimpen, blijven belangrijk. Controleer de laatste regel: daar kan de ruimteverdeling anders ogen dan op een volle regel. Gebruik geen lege items om gaten op te vullen. Als je vaste kolomrelaties in twee richtingen nodig hebt, kan grid beter bij die indeling passen.

Voorbeeld

.rij { display: flex; flex-wrap: wrap; gap: 1rem; }
.rij > * { flex: 1 1 14rem; }

Naslag: MDN Web Docs over dit onderdeel. De uitleg hierboven is zelfstandig geformuleerd.