Wrapping and Gap
By default, flex items remain on one line. flex-wrap: wrap allows them to form multiple lines when necessary. The gap property provides consistent spacing between flex items without requiring margins.
Flexbox wrapping is useful for toolbars, tag lists, button groups, navigation items, and card rows where the number of items can change.
Flex Wrapping
Wrapping Card Row
.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 280px;
}💡 Cards attempt to use at least around 280px of basis and wrap when insufficient horizontal space remains.
Key Takeaways
flex-wrapallows items to move onto additional lines.gapis cleaner than manually managing margins between items.
Knowledge Check
What does `flex-wrap: wrap` allow?