CSS Flexbox Cheatsheet

All Flexbox container and item properties with values, descriptions, and copy-ready examples. Filter by category or search any property.

Showing 61 of 61 entries — click any card to copy the example

Flexbox Main Axis vs Cross Axis

Every flex container has two axes. The main axis runs in the direction of flex-direction — horizontal for row (the default), vertical for column. The cross axis is always perpendicular to the main axis.

justify-content always controls the main axis, and align-items always controls the cross axis. When you change flex-direction to column, the axes swap — so justify-content: center now centers vertically. This is the most common source of confusion with Flexbox.

align-content only applies to multi-line flex containers (where flex-wrap: wrap is set). It controls how the rows are distributed along the cross axis when there is extra space.

The flex Shorthand

The flex shorthand sets three properties at once: flex-grow, flex-shrink, and flex-basis. The most important values to know:

flex: 1— Equal share of space. Equivalent to 1 1 0. All siblings with this value will be the same width.
flex: auto— Equivalent to 1 1 auto. Grows and shrinks but starts from the item's natural size — larger content items get more space.
flex: none— Equivalent to 0 0 auto. Fully inflexible — the item never grows or shrinks. Use for fixed-size elements like logos.

The subtle difference between flex: 1 (basis 0) and flex: auto (basis auto) matters when siblings have different content sizes. With basis 0, space is distributed purely on the grow ratio. With basis auto, the browser first allocates natural sizes, then distributes remaining space.

Common Flexbox Patterns

These are the patterns you'll reach for in almost every project:

Perfect center: display: flex; justify-content: center; align-items: center on a container. Add min-height: 100vh to center in the viewport.
Sticky footer: Apply display: flex; flex-direction: column; min-height: 100vh to the body or root, then flex-grow: 1 to the main content area.
Responsive card grid: Use display: flex; flex-wrap: wrap; gap: 1rem on the container, and flex: 1 1 280px on each card. Cards wrap automatically.
Truncated text in flex item: Add min-width: 0 to the flex item, then overflow: hidden; text-overflow: ellipsis; white-space: nowrap to the text element inside. Without min-width: 0, the flex item won't shrink below its content size.

Frequently Asked Questions

When should I use Flexbox vs CSS Grid?

Use Flexbox when you need to lay out items along a single axis — either a row or a column. It excels at navigation bars, button groups, centering elements, and distributing space between items in one direction. Use CSS Grid when you need two-dimensional control — rows AND columns at the same time. A good rule of thumb: Flexbox is content-driven (the content determines size and layout), while Grid is layout-driven (you define the grid first, then place items into it).

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

justify-content controls alignment along the main axis — by default that is horizontal (left-right) when flex-direction is row. align-items controls alignment along the cross axis — perpendicular to the main axis, so vertical (top-bottom) for row direction. When you switch to flex-direction: column, they swap: justify-content becomes vertical and align-items becomes horizontal. A handy mnemonic: justify = main axis, align = cross axis.

What does flex: 1 actually mean?

flex: 1 is shorthand for flex: 1 1 0, which sets flex-grow to 1, flex-shrink to 1, and flex-basis to 0. This means the item will grow to fill available space, can shrink if needed, and starts its size calculation from zero rather than its natural content size. Because the basis is 0, multiple flex:1 siblings will share space perfectly equally regardless of their content. Compare this to flex: auto (which is flex: 1 1 auto) — that also grows and shrinks, but starts from the item's natural size, so items with more content get more space.

When would I use flex-shrink: 0?

Use flex-shrink: 0 when you need an item to maintain a fixed size and never compress — common use cases include logos, icons, avatars, or fixed-width sidebars inside a flex row. Without it, when the container runs out of space, all flex items shrink proportionally by default (flex-shrink: 1). Combining flex-shrink: 0 with an explicit width or flex-basis gives you a rigid item that won't be squeezed.

What are the most reliable patterns for centering with Flexbox?

The simplest centering pattern is: display: flex; justify-content: center; align-items: center — applied to the parent. This centers the child both horizontally and vertically. For centering within a full-screen layout, add min-height: 100vh to the container. To center text or inline content inside a flex item, you can also apply display: flex; align-items: center to the item itself. For a navigation bar (horizontal center with space-between), use display: flex; justify-content: space-between; align-items: center.