CSS Flexbox: A Complete Guide with Examples

CSS Flexbox is a one-dimensional layout model that makes it easy to distribute space and align items in a container. Before Flexbox, centering elements, creating equal-height columns, and building responsive navigation required hacks with floats and positioning. Today, Flexbox handles all of these with just a few properties.

How Flexbox Works

Flexbox works on two axes. The main axis runs in the direction defined by flex-direction (default is horizontal). The cross axis runs perpendicular to it. Every flex layout starts by setting display: flex on the container:

flex-direction

This property defines the main axis direction. The four values are:

justify-content

Controls how items are distributed along the main axis. This is the property you use most often to space items horizontally in a row layout:

align-items

Controls alignment along the cross axis. In a row layout, this aligns items vertically:

The Classic Center Trick

Before Flexbox, centering an element both horizontally and vertically was surprisingly difficult. With Flexbox, it takes three lines:

flex-wrap

By default, flex items try to fit on one line. Setting flex-wrap: wrap allows items to flow onto multiple lines when the container is too narrow. This is essential for responsive card grids and tag lists.

gap

The gap property adds space between flex items without adding margin to the first or last item. It works the same way as grid gap:

Child Item Properties

Flex children have their own set of properties that control how they grow, shrink and size themselves:

• flex-grow controls how much an item grows relative to siblings. A value of 1 means the item takes available space equally.
• flex-shrink controls how much an item shrinks when the container is too small. Default is 1.
• flex-basis sets the initial size before growing or shrinking. Think of it as a preferred width.
• align-self overrides the container's align-items for a single child.
• order changes the visual order without changing the HTML source order.

Common Layout Patterns

• Navbar. Use justify-content: space-between to push the logo left and nav links right.
• Card grid. Combine flex-wrap: wrap with a fixed flex-basis on each card for a responsive grid.
• Sticky footer. Set the page to min-height: 100vh with flex-direction: column and flex-grow: 1 on the main content.
• Equal-height columns. Flex items in a row automatically stretch to the tallest item's height.
• Media object. An image on the left with text that fills the remaining space using flex: 1.

Flexbox vs Grid

Flexbox is designed for one-dimensional layouts (a single row or column). CSS Grid is designed for two-dimensional layouts (rows and columns simultaneously). In practice, you use both together. Flexbox for component-level alignment (navbars, card content, form rows) and Grid for page-level structure (main layout, dashboard grids).

Browser Support

Flexbox is supported in all modern browsers including Chrome, Firefox, Safari, Edge and mobile browsers. The gap property for Flexbox has been supported since 2021 in all major browsers. There is no need for vendor prefixes in 2026.