CSS Flexbox: The Complete Guide for Responsive Layouts

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that distributes space and aligns items within a container. Unlike floats or inline-block, Flexbox was designed specifically for modern responsive layouts — centering, dynamic resizing, reordering, and wrapping all become trivial.

Flexbox works along two axes: the main axis (defined by flex-direction) and the cross axis (perpendicular to it). Everything Flexbox does — alignment, spacing, wrapping — is expressed in terms of these two axes.

Flex Container vs Flex Items

Flexbox has two key concepts:

Flex container — The parent element with display: flex or display: inline-flex.
Flex items — The direct children of the flex container.

Properties applied to the container affect the layout of all children. Properties applied to individual items override the container's defaults for that specific child.

Flex Container Properties

flex-direction

Defines the main axis direction. This is the foundational Flexbox property — everything else builds on it.

.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 (horizontal in row-direction):

.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;  /* space around each item */
  justify-content: space-evenly;  /* perfectly equal spacing */
}

align-items

Aligns items along the cross axis (vertical in row-direction):

.container {
  align-items: stretch;    /* default: fill container height */
  align-items: flex-start; /* align to top */
  align-items: flex-end;   /* align to bottom */
  align-items: center;     /* vertically centered */
  align-items: baseline;   /* align by text baseline */
}

flex-wrap

Controls whether items wrap to a new line when they overflow:

.container {
  flex-wrap: nowrap;    /* default: all items on one line */
  flex-wrap: wrap;      /* wrap to next line */
  flex-wrap: wrap-reverse; /* wrap upward */
}

gap

Adds spacing between flex items without using margins:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* applies both row and column gaps */
}

Flex Item Properties

flex-grow

Controls how much an item can grow relative to its siblings. Default is 0 (no growth). A value of 1 makes the item fill available space:

.item {
  flex-grow: 1; /* this item takes up all remaining space */
}

.sidebar { flex-grow: 0; }  /* fixed width */
.content { flex-grow: 1; }  /* fills remaining space */

flex-shrink

Controls how much an item can shrink when there isn't enough space. Default is 1 (can shrink):

.item {
  flex-shrink: 0; /* item will not shrink below its content size */
}

flex-basis

Sets the initial size of an item before growing or shrinking:

.item {
  flex-basis: 200px; /* starts at 200px, then grows/shrinks */
}

/* Shorthand: flex: grow shrink basis */
.sidebar { flex: 0 0 250px; }      /* fixed 250px */
.content { flex: 1 1 auto; }        /* grows, shrinks, auto basis */
.column  { flex: 1 1 300px; }      /* flexible column, min 300px */

align-self

Overrides align-items for a single item:

.item-special {
  align-self: flex-end; /* this item alone aligns to bottom */
}

Common Layout Patterns

1. Perfect Centering

The most famous Flexbox use case — center anything in both axes:

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

2. Responsive Navbar

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

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

3. Card Grid (Flex-wrap)

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 300px; /* grow, shrink, min 300px basis */
}

4. Holy Grail Layout

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-area {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 250px;
}

.content {
  flex: 1;
}

Try Our Visual Flexbox Generator

Learning Flexbox by writing code is the best way, but sometimes you need to iterate visually. Our free online Flexbox generator lets you experiment with every Flexbox property in real-time. Tweak justify-content, align-items, flex-wrap, and item properties, see the result instantly, and export the CSS code. It's the perfect companion for learning Flexbox or prototyping layouts quickly.

Flexbox vs CSS Grid

A common question: when to use Flexbox vs CSS Grid?

Flexbox is one-dimensional (row OR column). Best for navigation bars, toolbars, card rows, centering, and distributing items along a single axis.
CSS Grid is two-dimensional (rows AND columns simultaneously). Best for page-level layouts, dashboards, and any design with explicit row and column placement.
They work great together — use Grid for the page structure and Flexbox for individual components inside the grid cells.

Conclusion

CSS Flexbox revolutionized web layout. With just a few properties, you can create responsive, flexible, and maintainable layouts that were nearly impossible with older methods. Master the container properties (flex-direction, justify-content, align-items) and item properties (flex-grow, flex-shrink, flex-basis), and you'll be able to build almost any layout. For quick experimentation, use our Flexbox generator to see how each property affects the layout in real-time.