Classic Flex Layout Patterns

## What "centering" means to a flex container A flex container lays its children out along a **main axis**, chosen by `flex-direction`. The default is `row`, so in a left-to-right writing mode the main axis runs horizontally. The perpendicular axis is the **cross axis**. Two properties do the positioning: `justify-content` distributes items along the main axis, and `align-items` positions them on the cross axis. That is why the recipe is worth memorising as *axes*, not as *directions*. In a row container `justify-content: center` is horizontal and `align-items: center` is vertical; add `flex-direction: column` and the two silently trade places. Candidates who memorised "justify is horizontal" get caught the moment the container becomes a column. ## The canonical recipe ```css .parent { display: flex; justify-content: center; align-items: center; min-height: 100vh; } ``` All four declarations sit on the parent. Nothing at all goes on the child — a frequent mistake is putting `justify-content` on the element you want centered, where it does nothing unless that element is itself a flex container. ## Why the height is the real answer A block-level box is as tall as its content unless you say otherwise. If `.parent` is a plain `div` wrapping one paragraph, its height *is* the paragraph's height, so after `align-items: center` there is zero leftover cross-axis space and the paragraph looks unchanged. Centering only becomes visible when the container is taller than the item. So the vertical half of the recipe is really "give the container a height": `min-height: 100vh` for a viewport-filling section, a fixed `height` for a fixed-size card, or an inherited height when the parent is itself a stretched flex or grid item. Interviewers ask this precisely because it separates people who copied a snippet from people who understand where the free space comes from. ## The auto-margin alternative ```css .parent { display: flex; min-height: 100vh; } .child { margin: auto; } ``` In a flex container an `auto` margin absorbs free space in the direction it points. With all four margins `auto`, the leftover space is split equally above/below and left/right, centering the child on both axes with a single declaration on the child. For a lone child this is equivalent to the three-property version. The behaviours differ once there are several items: auto margins take their share of the free space *before* `justify-content` gets to distribute what remains, which is exactly the property exploited by nav-bar layouts. ## Two shorthands that only half-work here Both `place-content` and `place-items` look like one-line centering, and in a grid container `place-items: center` genuinely is. In a flex container each of them only does half the job: - `place-content` is shorthand for `align-content` + `justify-content`. `align-content` applies only to **multi-line** flex containers, and the default is `flex-wrap: nowrap`, so with one line it is ignored — `place-content: center` centers horizontally only. - `place-items` is shorthand for `align-items` + `justify-items`, and flex containers ignore `justify-items` entirely, so `place-items: center` centers vertically only (in a row). Knowing why each falls short is a much stronger answer than reciting the three-property recipe. ## Things that are not box centering `text-align: center` centers *inline content* inside a block; it does not move the block itself. `line-height` equal to the container height only ever centers a single line of text and breaks on wrap. `vertical-align` applies to inline-level and table-cell boxes, not to flex items. These are the pre-flexbox workarounds, and reaching for them today reads as out-of-date. ## Practical variations If the child should also be centered but capped in width, keep the flex recipe and give the child `max-width` — the container centers whatever width the child settles at. If several children should be centered as a group, the same recipe works, and `gap` spaces them. If you want the child centered horizontally but pinned to the top, use `align-items: flex-start` and keep `justify-content: center`; the two axes are always controlled independently, which is the whole point of the model.