HTML & CSS82 min total · 18 parts

CSS Fundamentals: The Box Model, Specificity, Positioning, and Layout

Part 12 of 18 · ~2 min

Flexbox In Depth

The "You might also like" rail needs its cards laid out in a single scrollable row, evenly spaced, never stretched to fill leftover space. That's a one-axis problem, which is exactly what Flexbox is for:

.rail {
  display: flex;
  gap: 16px;           /* space between cards — never collapses, unlike margin */
  overflow-x: auto;
  padding-bottom: 8px; /* room for the scrollbar, so it doesn't sit flush against the cards */
}
.rail .card {
  flex: 0 0 220px; /* don't grow, don't shrink, stay 220px wide */
}

People confuse these two constantly, and the reason is structural: neither one has a fixed meaning on its own, because flex-direction is what decides which axis either of them is even operating on:

Property	Controls	Common values
`flex-direction`	Decides which axis counts as "main" for everything below	`row` (default), `column`, `row-reverse`, `column-reverse`
`justify-content`	Spaces items out along whichever axis is main	`flex-start`, `center`, `space-between`, `space-around`
`align-items`	Spaces items out along whichever axis is cross	`stretch` (default), `center`, `flex-start`, `flex-end`
`flex-wrap`	Lets items spill onto a new line instead of overflowing	`nowrap` (default), `wrap`

The toolbar above the category grid — a search field on the left, sort and filter controls on the right — is the other shape Flexbox handles cleanly:

.toolbar {
  display: flex;
  justify-content: space-between; /* pushes the two groups to opposite ends */
  align-items: center;            /* centers everything vertically, regardless of each control's own height */
}

flex unpacks to flex-grow flex-shrink flex-basis in that order, and flex: 0 0 220px on each rail card is really just two of those three switched off: don't grow past 220px, don't shrink below it either, and never mind what the container would otherwise have handed it.