CSS Flexbox Cheatsheet - Flexbox Layout Reference

flex: 1 is shorthand for flex: 1 1 0%, the three numbers being flex-grow, flex-shrink and flex-basis. Because flex-basis is 0%, the item starts at zero size, so the container treats the entire main-axis space as free space and hands it out in the grow ratio 1:1 — hence the equal-width look. Compare flex: auto (1 1 auto), which keeps the content intrinsic size so short items look narrower, and flex: 0 0 200px, which opts out of growing and shrinking entirely and pins the item at 200px.

Because align-items controls the cross axis, and which axis is cross is decided by flex-direction. With the default flex-direction: row the cross axis is vertical, so align-items: center sizes each item to its content and centers it, collapsing the container to the tallest child. The default align-items: stretch is what makes items fill the container height. A related trap: under flex-direction: column the cross axis is horizontal, so align-items: center centers horizontally and vertical centering requires justify-content: center.

The trick is flex-wrap: wrap plus flex-basis. Set the container to display: flex; flex-wrap: wrap; gap: 16px and give each card flex: 1 1 200px — flex-basis: 200px supplies the ideal width, flex-grow: 1 lets the cards on a line stretch to fill the row, and flex-shrink: 1 allows them to compress. On a wide viewport they fill one stretched row; once the viewport can no longer fit 200px, they wrap to the next line, giving you a responsive grid with zero @media rules.

All three are justify-content values distributing leftover main-axis space, but they divide it differently. space-between pins the first and last item to the edges and splits the rest evenly — the classic navbar distribution. space-around gives every item equal spacing on both sides, so the outer margins are half the interior gaps. space-evenly makes every gap identical, including the gaps at the container edges. When a card row or button group looks like its edge padding does not match the inner spacing, switching among these three is the fix.

Give the outer wrapper display: flex; flex-direction: column; min-height: 100vh so the main axis becomes vertical, then set the main content area to flex: 1 — its flex-grow consumes all leftover height and pushes the footer to the bottom. When content exceeds one viewport the wrapper simply grows and the footer follows the content instead of overlapping it. If the footer gets squashed because flex-shrink applies, give the content area flex: 1 0 auto so it keeps its base size and is not compressed.