CSS Flexbox: The Complete Guide to Flexible Layouts

Flexbox is one of the most powerful layout tools in CSS. It makes creating complex layouts simple, and responsive design a breeze. In this guide, we'll cover everything you need to master Flexbox.

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed for arranging items in one dimension — either horizontally or vertically. It excels at:

• Distributing space among items
• Aligning items in various ways
• Reordering items without changing HTML
• Creating responsive layouts

Basic Concepts

The Flex Container

To use Flexbox, first create a flex container:

.container {
    display: flex;
}

All direct children of this container become "flex items" and can be controlled with Flexbox properties.

Main Axis vs Cross Axis

Flexbox works along two axes:

• Main Axis — The primary direction (horizontal by default)
• Cross Axis — Perpendicular to the main axis (vertical by default)

Understanding these axes is crucial for mastering Flexbox.

Container Properties

flex-direction

Controls the direction of the main axis:

.container {
    display: flex;
    flex-direction: row;         / Default: left to right /
    flex-direction: row-reverse; / Right to left /
    flex-direction: column;      / Top to bottom /
    flex-direction: column-reverse; / Bottom to top /
}

justify-content

Aligns items along the main axis:

.container {
    justify-content: flex-start;    / Default: items at start /
    justify-content: flex-end;      / Items at end /
    justify-content: center;        / Items centered /
    justify-content: space-between; / Equal space between items /
    justify-content: space-around;  / Equal space around items /
    justify-content: space-evenly;  / Equal space everywhere /
}

align-items

Aligns items along the cross axis:

.container {
    align-items: stretch;     / Default: fill container height /
    align-items: flex-start;  / Items at top /
    align-items: flex-end;    / Items at bottom /
    align-items: center;      / Items centered vertically /
    align-items: baseline;    / Items aligned by text baseline /
}

flex-wrap

Controls whether items wrap to new lines:

.container {
    flex-wrap: nowrap;       / Default: single line /
    flex-wrap: wrap;         / Wrap to multiple lines /
    flex-wrap: wrap-reverse; / Wrap in reverse order /
}

gap

Sets spacing between flex items:

.container {
    gap: 20px;           / Equal gap in all directions /
    gap: 10px 20px;      / Row gap, column gap /
    row-gap: 10px;       / Only row gap /
    column-gap: 20px;    / Only column gap /
}

Item Properties

flex-grow

Controls how much an item should grow relative to others:

.item {
    flex-grow: 0;  / Default: don't grow /
    flex-grow: 1;  / Grow to fill available space /
    flex-grow: 2;  / Grow twice as much as flex-grow: 1 /
}

flex-shrink

Controls how much an item should shrink:

.item {
    flex-shrink: 1;  / Default: shrink if needed /
    flex-shrink: 0;  / Don't shrink /
    flex-shrink: 2;  / Shrink twice as much /
}

flex-basis

Sets the initial size of an item:

.item {
    flex-basis: auto;  / Default: use content size /
    flex-basis: 200px; / Start at 200px /
    flex-basis: 25%;   / Start at 25% of container /
}

The flex Shorthand

Combine grow, shrink, and basis:

.item {
    flex: 1;        / flex-grow: 1, flex-shrink: 1, flex-basis: 0% /
    flex: 0 1 auto; / Default values /
    flex: 1 1 200px; / Grow and shrink, starting at 200px /
}

align-self

Override alignment for individual items:

.item {
    align-self: auto;       / Inherit from container /
    align-self: flex-start; / Align to top /
    align-self: center;     / Center vertically /
    align-self: flex-end;   / Align to bottom /
}

Common Patterns

Centering Content

The classic Flexbox centering pattern:

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Navigation Bar

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

Card Grid

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    flex: 1 1 300px; / Grow, shrink, min-width 300px /
}

Sticky Footer

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1; / Takes all available space /
}

Try It Yourself

Open ProLiveEditor and experiment with these examples. The live preview makes it easy to see how each property affects your layout!