CSS Flexbox Complete Guide for Beginners

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model that makes it easy to design responsive layouts without using floats or positioning.

The Basics

Every flexbox layout has two axes:

• Main axis — the direction items flow (default: horizontal)
• Cross axis — perpendicular to the main axis

.container {
  display: flex;
}

That's it! Your container is now a flex container.

Key Properties

flex-direction

Controls the direction of items:

flex-direction: row;          /* → left to right (default) */
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:

justify-content: flex-start;    /* pack to start */
justify-content: flex-end;      /* pack to end */
justify-content: center;        /* center items */
justify-content: space-between; /* equal space between */
justify-content: space-around;  /* equal space around */
justify-content: space-evenly;  /* truly equal spacing */

align-items

Aligns items along the cross axis:

align-items: stretch;     /* fill container height (default) */
align-items: flex-start;  /* align to top */
align-items: flex-end;    /* align to bottom */
align-items: center;      /* center vertically */
align-items: baseline;    /* align text baselines */

Try It Live

Build and experiment with our Flexbox Playground — adjust all properties in real-time and copy the CSS code.

Common Patterns

Center Everything

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

Navigation Bar

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Card Grid with Wrap

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