CSS Reference

CSS Flexbox Layout

Complete guide to CSS Flexbox — container properties, item properties, alignment, wrapping, and common layout patterns.

Overview

Flexbox (Flexible Box Layout Module) is a CSS layout model designed for distributing space and aligning items in a container. Set `display: flex` on a container to create a flex formatting context. Children become flex items that can grow, shrink, and be aligned along the main and cross axes. Flexbox replaces many float and positioning hacks with a clean, predictable API.

Syntax

display: flex | inline-flex

Values

flex-direction

`row` (default), `row-reverse`, `column`, `column-reverse`. Sets the main axis direction.

justify-content

Aligns items along main axis: `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

align-items

Aligns items along cross axis: `stretch` (default), `flex-start`, `center`, `flex-end`, `baseline`.

flex-wrap

`nowrap` (default), `wrap`, `wrap-reverse`. Controls whether items wrap to new lines.

gap

Sets spacing between items. `gap: 16px` or `row-gap: 16px; column-gap: 8px`.

flex (item)

Shorthand for `flex-grow`, `flex-shrink`, `flex-basis`. `flex: 1` makes items share space equally.

align-self (item)

Overrides `align-items` for a single item.

Browser Support

Supported in all modern browsers. No vendor prefix needed. gap in flexbox: Chrome 84+, Firefox 63+, Safari 14.1+.

Try it visually

Use our visual display: flex generator to create and preview CSS code in real-time.

Open CSS Flexbox Layout Tool

Frequently Asked Questions

Flexbox: one-dimensional layout (row OR column). Grid: two-dimensional layout (rows AND columns). Use flexbox for component-level layout (navbars, cards), grid for page-level structure.

On the container: `display: flex; justify-content: center; align-items: center`. This centers children both horizontally and vertically.

It is shorthand for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%`. The item will grow to fill available space, sharing equally with other flex: 1 siblings.