De flex-wrap-eigenschap in CSS wordt gebruikt om aan te geven hoe flexibele items (flex-items) zich moeten gedragen als ze niet allemaal in één regel passen binnen een flexcontainer. Met andere woorden, het controleert of de flex-items moeten “wrappen” (op een nieuwe regel beginnen) of dat ze moeten “krimpen” om in één regel te passen.
De flex-wrap-eigenschap kan een van de volgende waarden hebben:
nowrap: Dit is de standaardwaarde. De flex-items blijven in één regel, zelfs als ze niet allemaal passen binnen de breedte van de flexcontainer. Dit kan ertoe leiden dat de flex-items worden verkleind om in de container te passen.
wrap: De flex-items worden in meerdere regels geplaatst als ze niet allemaal in één regel passen. De items worden boven elkaar geplaatst, beginnend vanaf de bovenkant van de flexcontainer.
wrap-reverse: Dit werkt hetzelfde als wrap, maar de items worden in omgekeerde volgorde weergegeven, dus het eerste item komt onderaan en het laatste item bovenaan.
De flex-wrap-eigenschap is handig wanneer je flexbox-items wilt organiseren in een flexcontainer die mogelijk niet genoeg ruimte heeft om alle items in één regel te plaatsen. Door de waarde van flex-wrap te wijzigen, kun je de flex-items laten “wrappen” naar de volgende regel, waardoor je een betere lay-out kunt creëren voor verschillende schermgroottes en apparaten.
