CSS: Flex Box Layout

By Xah Lee. Date: . Last updated: .
xtodo

(ai helped)

What's Flex Box Layout

Flexible Box Layout is very useful, flexible, one-dimensional layout. It's very easy to align, distribute, and size items within a container.

Example

To use flexbox, set display: flex (or inline-flex) on the parent element. 

<div class="xflexbox">
 <div class="xitem">1</div>
 <div class="xitem">2</div>
 <div class="xitem">3</div>
</div>
.xflexbox {
 display: flex;
 border: solid 1px red;
}

.xitem {
 border: solid 1px blue;
 padding: 20px;
 margin: 6px;
}

Browser shows

1
2
3

Result: The three items line up horizontally in a row.

Main Axis vs. Cross Axis

2 important concepts:

Flex Container Properties

flex-direction

Defines the direction of the main axis.

.xflexbox {
 flex-direction: row; /* default: left to right */
 flex-direction: row-reverse; /* right to left */
 flex-direction: column; /* top to bottom */
 flex-direction: column-reverse;
}

flex-wrap

flex-wrap property controls whether flex items are forced into a single line or allowed to wrap onto multiple lines within a flex container.

By default, flex containers use nowrap, which keeps items in one line even if it causes overflow; setting it to wrap allows items to flow onto new lines as needed, aiding responsive layouts without media queries.

The property accepts three primary values:

nowrap

The default. Items remain in a single line and may overflow the container.

wrap

Items break into multiple lines, stacking in the direction defined by flex-direction.

wrap-reverse

Items wrap into multiple lines but stack in the opposite direction of flex-direction. 

.xflexbox {
 flex-wrap: nowrap; /* default */
 flex-wrap: wrap; /* wrap to next line */
 flex-wrap: wrap-reverse;
}

Shorthand:

flex-flow is a shorthand for 

.xflex {
 flex-flow: row wrap;
}

justify-content (Main Axis Alignment)

Distributes space along the main axis.

.xflexbox {
 justify-content: flex-start; /* default */
 justify-content: flex-end;
 justify-content: center;
 justify-content: space-between; /* items at edges, equal space between */
 justify-content: space-around; /* equal space around items */
 justify-content: space-evenly; /* fully equal spacing */
}

align-items (Cross Axis Alignment)

Aligns items along the cross axis.

.xflexbox {
 align-items: stretch; /* default */
 align-items: flex-start;
 align-items: flex-end;
 align-items: center;
 align-items: baseline;
}

align-content (Multi-line Cross Axis)

Only works when flex-wrap: wrap is used.

.xflexbox {
 align-content: stretch; /* default */
 align-content: flex-start;
 align-content: center;
 align-content: space-between;
}

gap (Spacing Between Items)

Modern and clean way to add space.

.xflexbox {
 gap: 20px; /* all sides */
 row-gap: 15px;
 column-gap: 30px;
}

4. Flex Item Properties

flex Shorthand

The most important property for items.

.xitem {
 flex: 1; /* grow:1, shrink:1, basis:0% */
 flex: 2 1 300px; /* grow, shrink, basis */
}

align-self (Override alignment for one item)

.xitem {
 align-self: flex-start; /* overrides container's align-items */
}

order

Changes visual order without changing HTML.

.xitem:nth-child(2) {
 order: -1;
} /* appears first */

Negative values come before 0; positive after.

5. Complete Example: Responsive Navigation + Content

<header class="nav">
<div class="logo">Logo</div>
<nav class="menu">
<a>Home</a>
<a>About</a>
<a>Services</a>
<a>Contact</a>
</nav>
</header>

<div class="main-content">
<aside class="sidebar">Sidebar</aside>
<main>
Content area

</main>
</div>
.nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 1rem;
 background: #222;
 color: white;
}

.menu {
 display: flex;
 gap: 2rem;
}

.main-content {
 display: flex;
 gap: 20px;
 padding: 20px;
}

.sidebar {
 flex: 1 1 250px; /* sidebar stays ~250px */
}

main {
 flex: 3 1 600px; /* content takes more space */
}

/* Mobile */
@media (max-width: 768px) {
 .nav {
  flex-direction: column;
 }
 .main-content {
  flex-direction: column;
 }
}

6. Common Patterns & Tips

Centered content:

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

Holy Grail Layout (header, footer, sidebar, content): Use flex-direction: column on body and nested flex containers.

Card Grid:

.cards {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
}
.card {
 flex: 1 1 300px; /* grows but won't go below 300px */
}

7. Browser Support & Best Practices

Quick Reference Cheat Sheet

Container:

Items:

css flex

.xflex {
 display: flex;
 display: inline-flex;

 flex-direction: row;
 flex-direction: column;

 flex-wrap: wrap;
 flex-wrap: nowrap;
 flex-wrap: wrap-reverse;

 flex-basis: 1200px;
 justify-content: flex-start;

 align-self: auto normal stretch center start end self-start self-end flex-start flex-end baseline first last safe unsafe;

 align-items: center;
 align-content: flex-start;
}

.xflex2 {
 flex-grow: 2;
 flex-shrink: 2;
 flex: 1 1 300px;
 flex-basis: 300px;
 order: 2;
}

CSS, Layout