CSS Flexbox: The Complete Beginner's Guide to Flexible Layouts

Why Flexbox Changed CSS

Before Flexbox, centering a div was a meme. Developers used floats, inline-block hacks, and table display modes to build layouts. These approaches were fragile, verbose, and fought the browser's default behavior at every turn.

Flexbox solved this. It provides a straightforward way to lay out, align, and distribute space among items in a container. Centering something vertically and horizontally? Three lines of CSS.

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}

That is it. No hacks, no workarounds, no prayers.

The Two Axes

Flexbox works along two axes:

• Main axis -- the direction items flow (horizontal by default)
• Cross axis -- perpendicular to the main axis (vertical by default)

Understanding these two axes is the key to understanding every Flexbox property. When you read "justify," think main axis. When you read "align," think cross axis.

The Container Properties

Flexbox properties are split between the container (parent) and the items (children). Start with the container.

display: flex

This is the switch that turns on Flexbox. Apply it to the parent element.

1.container {
2  display: flex;
3}

All direct children of this container immediately become flex items. They line up in a row by default.

flex-direction

Controls the direction of the main axis.

1.container {
2  display: flex;
3  flex-direction: row;           /* default: left to right */
4  flex-direction: row-reverse;   /* right to left */
5  flex-direction: column;        /* top to bottom */
6  flex-direction: column-reverse; /* bottom to top */
7}

When you change flex-direction to column, the main axis becomes vertical. This means justify-content now controls vertical alignment and align-items controls horizontal alignment. This catches many beginners off guard.

justify-content

Distributes space along the main axis.

1.container {
2  display: flex;
3  justify-content: flex-start;    /* items packed to the start (default) */
4  justify-content: flex-end;      /* items packed to the end */
5  justify-content: center;        /* items centered */
6  justify-content: space-between; /* equal space between items */
7  justify-content: space-around;  /* equal space around items */
8  justify-content: space-evenly;  /* equal space between and around items */
9}

space-between is the most commonly used value for navigation bars and card grids. It pushes the first item to the start and the last to the end, distributing remaining space evenly between items.

align-items

Distributes space along the cross axis (the perpendicular direction).

1.container {
2  display: flex;
3  align-items: stretch;    /* items stretch to fill container (default) */
4  align-items: flex-start; /* items aligned to the start */
5  align-items: flex-end;   /* items aligned to the end */
6  align-items: center;     /* items centered */
7  align-items: baseline;   /* items aligned by text baseline */
8}

flex-wrap

By default, flex items try to fit on one line. flex-wrap allows them to wrap onto multiple lines.

1.container {
2  display: flex;
3  flex-wrap: nowrap; /* default: single line */
4  flex-wrap: wrap;   /* items wrap onto new lines */
5}

This is essential for responsive design. Without wrapping, items shrink to fit, which can make them unusably small on mobile screens.

gap

Adds space between flex items without using margins. This was a game-changer when browsers added support.

1.container {
2  display: flex;
3  gap: 16px;        /* equal gap in both directions */
4  gap: 16px 24px;   /* row-gap column-gap */
5}

gap is cleaner than margins because it only applies between items, not on the outer edges.

The Item Properties

These properties apply to individual flex items (children of the flex container).

flex-grow

Controls how much an item grows relative to other items when extra space is available.

1.item {
2  flex-grow: 0; /* default: don't grow */
3  flex-grow: 1; /* grow to fill available space */
4}
5 
6/* Make one item take twice as much extra space */
7.item-a { flex-grow: 1; }
8.item-b { flex-grow: 2; }

flex-shrink

Controls how much an item shrinks when there is not enough space.

1.item {
2  flex-shrink: 1; /* default: shrink equally */
3  flex-shrink: 0; /* never shrink */
4}

Setting flex-shrink: 0 is useful for fixed-width elements like logos or icons that should not compress.

flex-basis

Sets the initial size of an item before growing or shrinking occurs.

1.item {
2  flex-basis: auto;  /* default: use item's content size */
3  flex-basis: 200px; /* start at 200px, then grow/shrink */
4  flex-basis: 25%;   /* start at 25% of container */
5}

The flex Shorthand

The flex property combines grow, shrink, and basis into one declaration.

1.item {
2  flex: 1;       /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
3  flex: 0 0 200px; /* don't grow, don't shrink, start at 200px */
4  flex: 2 1 auto;  /* grow twice as fast, shrink normally, auto basis */
5}

The most common value is flex: 1, which makes items share space equally.

align-self

Overrides the container's align-items for a single item.

1.container {
2  display: flex;
3  align-items: center;
4}
5 
6.special-item {
7  align-self: flex-end; /* this item sits at the bottom */
8}

order

Changes the visual order of items without changing the HTML.

1.item-first  { order: -1; } /* appears first */
2.item-last   { order: 1; }  /* appears last */

Default order is 0. Lower numbers appear first.

Common Layout Patterns

Centering (The Classic)

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  min-height: 100vh;
6}

Navigation Bar

1.navbar {
2  display: flex;
3  justify-content: space-between;
4  align-items: center;
5  padding: 16px 24px;
6}

Card Grid

1.card-grid {
2  display: flex;
3  flex-wrap: wrap;
4  gap: 24px;
5}
6 
7.card {
8  flex: 1 1 300px; /* grow, shrink, minimum 300px */
9}

Sidebar Layout

1.layout {
2  display: flex;
3}
4 
5.sidebar {
6  flex: 0 0 250px; /* fixed 250px sidebar */
7}
8 
9.content {
10  flex: 1; /* content takes remaining space */
11}

Footer at Bottom

1.page {
2  display: flex;
3  flex-direction: column;
4  min-height: 100vh;
5}
6 
7.content {
8  flex: 1; /* pushes footer to bottom */
9}

Common Mistakes

Mistake 1: Forgetting flex-wrap

Without flex-wrap: wrap, items shrink infinitely rather than wrapping to a new line. On mobile, this creates horizontal scrolling or tiny, unreadable items.

Mistake 2: Confusing justify-content and align-items

Remember: justify-content works on the main axis, align-items works on the cross axis. When flex-direction is column, these axes swap.

Mistake 3: Using Flexbox for 2D Layouts

Flexbox is one-dimensional -- it works in a row OR a column. For true two-dimensional layouts (rows AND columns simultaneously), use CSS Grid instead. Flexbox and Grid complement each other.

Mistake 4: Not Using gap

Before gap had wide browser support, developers used margins on flex items. This created problems with outer edges and required :first-child or :last-child overrides. Use gap instead -- it is cleaner and supported in all modern browsers.

Flexbox vs Grid

Flexbox and CSS Grid are not competitors. They solve different problems:

• Flexbox: Best for one-dimensional layouts (a row of items or a column of items)
• Grid: Best for two-dimensional layouts (rows and columns simultaneously)

Use Flexbox for navigation bars, card rows, centering, and component-level layouts. Use Grid for page-level layouts and complex two-dimensional arrangements.

In practice, most pages use both: Grid for the overall page structure and Flexbox for the components within it.

Start Practicing Flexbox

Flexbox is one of those CSS skills that transforms how you write layouts. Once it clicks, you will never go back to float-based layouts.

The best way to learn is to build: take a design and try to implement it using only Flexbox. Start with simple patterns (centering, navigation) and work up to full page layouts.

Related Reading

• How to Learn JavaScript from Scratch -- CSS skills complement JavaScript for full frontend development
• React for Beginners: What to Learn First -- CSS Flexbox is essential for styling React components
• Best Programming Language to Learn First in 2026 -- frontend development requires HTML, CSS, and JavaScript together