Flexbox
Wrap flex items
Let items form multiple lines, control line spacing, and decide when a one-dimensional wrapping layout should become a Grid instead.
7 minute lesson
Flex items stay on one line by default. Allow wrapping on the container:
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}Give items a flexible basis when they need a useful minimum:
.tags > * {
flex: 1 1 12rem;
}The browser forms lines from available space. Each line is then sized independently. Items in different rows do not share column tracks, so wrapped cards may not align vertically across rows.
Use align-content to distribute multiple lines when the container has extra cross-axis space. It has no effect on a single line.
If you need consistent rows and columns together, Grid is usually a better model. Flexbox remains ideal for toolbars, navigation, button groups, and content that flows in one primary direction.
Resize slowly and zoom to 200%. Watch where content—not a named device—forces a new line. Keep source order meaningful because wrapping changes only visual lines, not reading or keyboard order.
Lesson completed