- What's the difference between justify-content and align-items?
- justify-content positions items along the main axis (the direction flex-direction sets — row = horizontal, column = vertical). align-items positions them along the cross axis (perpendicular to the main axis). For flex-direction: row, justify-content moves items left-right and align-items moves them up-down. Swap them when you switch to column. The two properties never overlap — each one only acts on its own axis.
- Why doesn't align-content do anything?
- align-content only takes effect when items wrap onto multiple lines. If flex-wrap is nowrap (the default), all items stay on one line and align-content has nothing to align. Set flex-wrap to wrap, add enough items that they spill onto a second row, and align-content starts controlling how the rows are distributed in the cross axis.
- What does flex-direction: row-reverse actually do?
- It reverses the order items are placed along the main axis without changing the source order in HTML. With row-reverse, item 1 is on the right, item 2 to its left, and so on. justify-content: flex-start now means the right edge instead of the left. Same idea for column-reverse — items stack bottom-up. Useful for RTL layouts or visual reordering without changing the DOM (which keeps tab order and screen-reader order intact).
- Should I use gap, or margin, or both?
- Use gap. It only puts space between items, not on the outside edges, and it works in both directions (row-gap, column-gap) once you switch to wrap. Margin on children is the old workaround — it adds space on every side, including the outer edges, and you have to fight it with negative margin on the parent. gap is supported in every browser shipped after April 2021, which covers everything in current use.
- How is flexbox different from CSS Grid?
- Flexbox is one-dimensional — you lay items out in a row or a column. Grid is two-dimensional — you define rows and columns and place items in cells. Rule of thumb: navigation bars, button rows, vertical stacks, sidebar+content, and any case where the items decide their own size = flexbox. Photo galleries, dashboards, magazine layouts, anything with named tracks = grid. They compose: a grid cell can be a flex container.
- Why is one item growing and the others aren't?
- It has flex-grow set to a positive number on the child. flex-grow tells an item how much of the leftover space to claim — 0 means "don't grow," 1 means "take an equal share," 2 means "take twice as much as the 1s." This generator focuses on the container properties; flex-grow / flex-shrink / flex-basis live on the children and you set them per-item in your own CSS.
- Will this CSS work in older browsers?
- Yes for everything modern. Flexbox is universally supported since 2017 (Chrome, Firefox, Safari, Edge, mobile). The gap property in flex containers is the only newer addition — fully supported since April 2021. If you're targeting IE 11 or a 2020 mobile browser, replace gap with margin on the children and avoid space-evenly (use space-around as a near-equivalent).
- Why don't my items shrink past their content?
- Each flex item has an implicit min-width: auto, which is the size of its content (longest word in a paragraph, intrinsic width of an image). That overrides flex-shrink. Add min-width: 0 to the child to let flex-shrink actually shrink it below its content size. This is the most common flexbox surprise — and the fix is a one-liner.
