CSS Flexbox: Advanced Patterns & Real Layouts

What is the difference between flex-basis and width?

flex-basis sets a flex item's size along the main axis (its width in a row, its height in a column) before flex-grow and flex-shrink redistribute leftover space. width is fixed and ignores that redistribution unless flex-shrink kicks in. The practical differences: flex-basis switches axis automatically with flex-direction, it wins over width when both are set on the same item, and flex-basis: 0 makes an item start from nothing so flex-grow shares space in pure ratios. Reach for flex-basis (usually via the flex shorthand) when an item lives in a flex container; reach for width when you want a hard size that grow and shrink leave alone.

Why is my flex item overflowing its container instead of shrinking?

By default every flex item has min-width: auto (or min-height: auto in a column), which means it refuses to shrink smaller than its content — a long word, a wide image, or a <pre> block sets a floor that flex-shrink cannot cross. The fix is to add min-width: 0 (or min-height: 0) to the item so it is allowed to shrink past its content and let overflow, text-overflow, or word-break handle the rest. This single line is the cure for the classic 'my flexbox blows out the page width' bug.

What does flex: 1 actually mean?

flex: 1 is shorthand for flex: 1 1 0% — flex-grow: 1, flex-shrink: 1, flex-basis: 0%. Because the basis is 0, every item starts from nothing and the whole container is shared out in proportion to the grow values, so three items with flex: 1 each become exactly equal thirds. That is different from flex: 1 1 auto (which factors in each item's content size first) and from flex: auto (which is flex: 1 1 auto). When you want equal columns regardless of content, flex: 1 is the right tool; when you want a minimum size that still grows, use flex: 1 1 280px.

Should I use order to rearrange my layout?

Use order for purely visual reordering — for example, moving a sidebar before the main content on wide screens while keeping the main content first in the HTML for screen readers and tab order. The key caveat is that order changes only the visual position, not the DOM order: keyboard focus and assistive tech still follow the source order, so a large mismatch confuses users. Use it sparingly and never as a substitute for writing the HTML in a sensible reading order.

When should I use Flexbox instead of CSS Grid?

Flexbox is one-dimensional: it lays items out along a single axis (a row or a column) and is ideal for distributing space inside that line — navbars, toolbars, button groups, centering, and content that should flow and wrap. CSS Grid is two-dimensional: it controls rows and columns at the same time and is the better choice for full page layouts and gallery grids where items must line up in both directions. A good rule of thumb: if you are thinking in a single line, use Flexbox; if you are thinking in a real grid of rows and columns, use Grid. They also compose well — a Grid page with flex containers inside its cells is common.

What is the difference between justify-content, align-items and align-content?

justify-content distributes space along the main axis (the direction your items flow). align-items aligns items along the cross axis within a single line. align-content only does something when items wrap onto multiple lines — it distributes the lines themselves along the cross axis, so on a single-line container it has no effect. If your align-content rule seems to be ignored, the usual reason is that flex-wrap is not set to wrap or there is only one line of items.