CSS Flexbox Guide: justify-content, align-items, flex & gap

Q: How do I center a div with Flexbox?

Put display: flex; justify-content: center; align-items: center; on the parent, with a height if you want vertical centering in a larger area. Grid's place-items: center is an even shorter alternative.

Q: What does flex: 1 actually mean?

It's shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The item starts from zero size and takes an equal share of the available space with other flex: 1 siblings, regardless of content size.

Q: Why won't my flex item shrink?

Flex items have min-width: auto by default, so they won't shrink below their content's minimum size. Set min-width: 0 (or overflow: hidden) on the item. Also check for flex-shrink: 0 or flex: none.

CSS Flexbox

Flexbox (the Flexible Box Layout module) lays out items along one dimension, a row or a column, and distributes space between them. It's the go-to tool for component-level layout: navigation bars, toolbars, button groups, cards with a footer pinned to the bottom, centering anything, and form rows where one input stretches while labels stay compact.

Flexbox replaced years of float and table hacks. It's supported in every browser, and together with CSS Grid for two-dimensional layouts it covers nearly all modern CSS layout needs. The concepts to master are the two axes, the alignment properties, and how the flex shorthand controls growing and shrinking.

TL;DR

display: flex makes an element a flex container; its direct children become flex items.
flex-direction sets the main axis (row or column); the cross axis is perpendicular.
justify-content aligns items along the main axis; align-items along the cross axis.
gap adds consistent spacing between items. No more margin hacks.
flex: 1 makes items share available space; flex: 0 0 auto keeps them at content size.
Items won't shrink below their content by default, so set min-width: 0 (or min-height: 0) to let text truncate or overflow correctly.

Quick Example

A header with a logo, navigation that fills the middle, and actions on the right:

Core Concepts

Axes

Main axis: the direction items are placed, set by flex-direction: row (default, inline direction), row-reverse, column, or column-reverse.
Cross axis: perpendicular to the main axis.

Every alignment property refers to one of these axes, so switching flex-direction to column swaps what justify-content and align-items do visually.

Container Properties

flex-flow: row wrap is shorthand for direction plus wrap.

Item Properties and the flex Shorthand

Each item's size along the main axis comes from three properties:

flex-basis: the starting size before free space is distributed (auto means use width/height or content size).
flex-grow: how much of the positive free space the item takes (a ratio).
flex-shrink: how much the item shrinks when space is short (a ratio, default 1).

The flex shorthand sets all three:

Other item properties: align-self (override cross-axis alignment for one item) and order (visual reordering; use it sparingly, see accessibility below).

Auto Margins

In a flex container, margin-left: auto (or margin-inline-start: auto) absorbs all free space on that side, pushing the item and everything after it to the end. It's a clean way to split a toolbar into left and right groups without wrappers.

Minimum Size and Overflow

Flex items default to min-width: auto, meaning they won't shrink smaller than their content. Long words, URLs, or white-space: nowrap text then overflow the container instead of truncating. Fix it with min-width: 0 on the item (or overflow: hidden), then apply text-overflow: ellipsis as needed. Column layouts have the same issue with min-height.

Common Patterns

Flexbox vs Grid

They combine naturally: a grid for the page, and flex inside components. See CSS Grid.

Best Practices

Use gap Instead of Margins

gap spaces items consistently without first-child and last-child margin fixes, and works with wrapping.

Prefer Logical Values

Use flex-start/flex-end and logical properties (margin-inline-start) so layouts adapt to right-to-left languages automatically. See internationalization.

Keep Visual Order and DOM Order Aligned

order and row-reverse change visual order but not focus or reading order, which confuses keyboard and screen reader users. Reorder the DOM when the order is meaningful. See accessibility.

Let Content Breathe With flex-wrap

Wrapping flex rows combined with sensible flex-basis values often produce responsive layouts without media queries. See responsive design.

Common Mistakes

Text Overflowing a Flex Item

Confusing justify-content and align-items After Changing Direction

With flex-direction: column, justify-content: center centers vertically and align-items: center centers horizontally. Think in main and cross axes, not horizontal and vertical.

Setting Heights to Force Equal Columns

Flex items already stretch to the tallest item on the cross axis (align-items: stretch). Fixed heights break with dynamic content.

FAQ

How do I center a div with Flexbox?

Put display: flex; justify-content: center; align-items: center; on the parent, with a height if you want vertical centering in a larger area. Grid's place-items: center is an even shorter alternative.

What does flex: 1 actually mean?

It's shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The item starts from zero size and takes an equal share of the available space with other flex: 1 siblings, regardless of content size.

Why won't my flex item shrink?

Flex items have min-width: auto by default, so they won't shrink below their content's minimum size. Set min-width: 0 (or overflow: hidden) on the item. Also check for flex-shrink: 0 or flex: none.

Should I use Flexbox or Grid for page layout?

Grid is usually better for page-level, two-dimensional structure (header, sidebar, main, footer). Flexbox is ideal inside components and for one-dimensional arrangements. Most modern layouts use both.