Flexbox is a one-dimensional layout model for distributing space and aligning items along a main axis and cross axis, with container properties controlling flow direction and item properties controlling grow, shrink, and basis behavior.
Flexbox lays out items along a main axis (set by flex-direction) and aligns them along the perpendicular cross axis. Changing direction swaps which axis justify-content and align-items control.
flex-grow controls how items absorb extra space, flex-shrink controls how they give up space, and flex-basis sets the starting size before distribution. The flex shorthand combines all three.
justify-content distributes items along the main axis (space-between, center, etc.), align-items aligns on the cross axis, and gap adds spacing without margin hacks.
Flexbox handles layout in one direction at a time. For two-dimensional layouts controlling both rows and columns simultaneously, use CSS Grid instead.
The CSS Flexible Box Layout (Flexbox) is the most widely used CSS layout mechanism for component-level arrangements. It provides powerful alignment and distribution capabilities along a single axis.
Flexbox operates on two axes:
flex-direction (default: row, meaning left to right)A flex container is created with display: flex (block-level) or display: inline-flex (inline-level). All direct children become flex items.
row (default), row-reverse, column, column-reverse. When direction is column, the main axis is vertical and justify-content controls vertical distribution.nowrap (default) keeps all items on one line, wrap allows items to flow to the next line. The shorthand flex-flow combines direction and wrap.flex-start, flex-end, center, space-between (equal gaps, no outer space), space-around (equal space around each item), space-evenly (equal space everywhere).stretch (default), flex-start, flex-end, center, baseline.row-gap and column-gap independently.0 (don't grow). flex-grow: 1 on all items distributes space equally.1 (all items shrink equally). Set to 0 to prevent shrinking.auto (uses the item's width/height). Set to 0 to ignore content size and distribute purely by flex-grow ratio.flex: grow shrink basis. Common values: flex: 1 (same as 1 1 0), flex: auto (same as 1 1 auto), flex: none (same as 0 0 auto).align-items for a single item.Centering (the classic interview question):
.container {
display: flex;
justify-content: center;
align-items: center;
}Navigation bar: display: flex; justify-content: space-between; for logo on the left and links on the right.
Sticky footer: flex-direction: column; min-height: 100vh; on the body, with flex: 1 on the main content area.
Equal-height cards: Flex items in a row stretch to the height of the tallest item by default (align-items: stretch).
Flexbox is one-dimensional — it handles layout in a single direction (row or column) at a time. CSS Grid is two-dimensional — it handles rows and columns simultaneously. Use Flexbox for component internals (navigation bars, card contents, form layouts) and Grid for page-level structure. They combine well: a Grid page layout with Flexbox components inside each grid area.
flex-basis takes priority over width (in row direction) or height (in column direction) on flex itemsmin-content, which can prevent shrinking below content width — use min-width: 0 to allow itmargin: auto on flex items absorbs remaining space, which can be used for alignment (e.g., pushing an item to the far right)Fun Fact
Before Flexbox, centering a div both horizontally and vertically in CSS required hacks like negative margins, table-cell display, or absolute positioning with transforms. Flexbox's two-line centering solution became so celebrated that 'how to center a div' is now a running joke in the front-end community.