CSS Flexbox: The Definitive Guide to Modern Layouts

Flexbox changed how we build layouts on the web. Before it, centering a div vertically required hacks involving display: table-cell, negative margins, or absolute positioning. Flexbox made these tasks trivial. This guide covers every property you need to know, organized by container properties and item properties, with practical examples you can use immediately.

Core Concepts

Flexbox operates on two axes. The main axis runs in the direction set by flex-direction (horizontal by default). The cross axis runs perpendicular to it. Understanding which axis you're working with is the key to using Flexbox confidently — many developers struggle because they mix up main axis alignment with cross axis alignment.

Container Properties

Container properties are applied to the parent element (the flex container). They control how child items are arranged.

flex-direction

Determines the direction of the main axis and the order in which items are placed:

• row (default) — Items flow left to right.
• row-reverse — Items flow right to left.
• column — Items flow top to bottom.
• column-reverse — Items flow bottom to top.

.container {
  display: flex;
  flex-direction: column;
}

justify-content

Controls alignment along the main axis. This is the property you reach for most often:

• flex-start — Items pack to the start.
• flex-end — Items pack to the end.
• center — Items center along the main axis.
• space-between — Equal spacing between items, no space at edges.
• space-around — Equal spacing around each item (half-size gaps at edges).
• space-evenly — Equal spacing everywhere, including edges.

/* Center items horizontally */
.navbar {
  display: flex;
  justify-content: space-between;
}

align-items

Controls alignment along the cross axis. This is how you vertically center content:

• stretch (default) — Items stretch to fill the container's cross dimension.
• flex-start, flex-end, center — Standard alignment options.
• baseline — Aligns items by their text baseline.

/* The classic vertical centering solution */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

flex-wrap

By default, flex items shrink to fit on one line. flex-wrap: wrap allows items to flow onto multiple lines when they exceed the container width. This is essential for responsive card grids and navigation menus.

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px; /* Grow, shrink, minimum 300px */
}

gap

The gap property sets spacing between flex items without adding margins. It accepts one value (for both axes) or two values (row gap, then column gap). Supported in all modern browsers.

Item Properties

Item properties are applied to individual flex children. They control how each item behaves within the container.

flex-grow, flex-shrink, flex-basis

These three properties work together to control an item's size:

• flex-grow — How much the item should grow relative to siblings when there's extra space. Default is 0 (don't grow).
• flex-shrink — How much the item should shrink when space is tight. Default is 1 (shrink equally).
• flex-basis — The initial size before growing or shrinking. Default is auto.

/* Sidebar + main content layout */
.sidebar { flex: 0 0 250px; } /* Fixed 250px, never grow/shrink */
.main    { flex: 1; }          /* Take remaining space */

align-self

Overrides the container's align-items for a specific item. Useful when one item needs different alignment from its siblings.

.container { align-items: flex-start; }
.special-item { align-self: center; /* This one is centered */ }

order

Changes the visual order of items without modifying the HTML. Items with lower order values appear first. Default is 0. Use sparingly — changing visual order without changing DOM order can confuse screen reader users.

Common Layout Patterns

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; } /* Pushes footer to bottom */

Equal-Height Columns

Flexbox makes equal-height columns automatic. No clearfix hacks, no table displays, no JavaScript:

.columns {
  display: flex;
  gap: 2rem;
}
.column {
  flex: 1; /* All columns are the same height */
}

Media Object (Image + Text)

.media {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.media img { flex-shrink: 0; }
.media .content { flex: 1; }

Flexbox vs Grid

Flexbox is optimized for one-dimensional layouts (a row or a column). CSS Grid handles two-dimensional layouts (rows and columns simultaneously). In practice, most modern sites use both: Grid for the page-level layout and Flexbox for component-level arrangements within grid cells. If you're building a nav bar, a card, or a form — Flexbox is usually the right choice.

Browser Support

Flexbox is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. IE 11 has partial support with some known bugs (particularly around flex-wrap and min-width auto-sizing). If you need to support legacy browsers, test thoroughly and consider using Autoprefixer to add vendor prefixes.

Try the Flexbox Generator

Experiment with Flexbox properties visually using our free Flexbox Generator. Adjust container and item properties in real time and copy the generated CSS into your project.