What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout model designed for arranging items in one dimension — either a row or a column. It makes it easy to distribute space, align items, and handle dynamic content sizes.

CSS

.container {
  display: flex;
}

Adding display: flex to a container makes all direct children become flex items that line up in a row by default.

Flex Container vs Flex Items

Flex container: The parent element with display: flex
Flex items: The direct children of the flex container

HTML

<div class="container"> <!-- Flex container -->
  <div class="item">1</div> <!-- Flex item -->
  <div class="item">2</div> <!-- Flex item -->
  <div class="item">3</div> <!-- Flex item -->
</div>

flex-direction

Controls the main axis — the direction flex items are laid out:

CSS

.row { flex-direction: row; }             /* Left to right (default) */
.row-reverse { flex-direction: row-reverse; } /* Right to left */
.column { flex-direction: column; }         /* Top to bottom */
.column-reverse { flex-direction: column-reverse; } /* Bottom to top */

The main axis determines the direction of item flow. The cross axis is perpendicular to it.

justify-content

Aligns items along the main axis:

CSS

.start { justify-content: flex-start; }      /* Pack to start (default) */
.end { justify-content: flex-end; }           /* Pack to end */
.center { justify-content: center; }           /* Center items */
.between { justify-content: space-between; }   /* Equal space between */
.around { justify-content: space-around; }     /* Equal space around */
.evenly { justify-content: space-evenly; }     /* Equal space everywhere */

Visual Difference

CSS

/* space-between: no space at edges, equal between items */
/* |item   item   item| */

/* space-around: half space at edges, full between items */
/* | item  item  item | */

/* space-evenly: equal space everywhere */
/* |  item  item  item  | */

align-items

Aligns items along the cross axis:

CSS

.stretch { align-items: stretch; }      /* Fill container height (default) */
.start { align-items: flex-start; }     /* Align to top */
.end { align-items: flex-end; }         /* Align to bottom */
.center { align-items: center; }         /* Center vertically */
.baseline { align-items: baseline; }     /* Align text baselines */

Perfect Centering

Combine justify-content and align-items to center both horizontally and vertically:

CSS

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

flex-wrap

By default, flex items try to fit on one line. flex-wrap controls wrapping:

CSS

.nowrap { flex-wrap: nowrap; }         /* All on one line (default) */
.wrap { flex-wrap: wrap; }             /* Wrap to next line */
.wrap-reverse { flex-wrap: wrap-reverse; } /* Wrap upward */

CSS

/* Responsive card grid with wrapping */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.card {
  flex: 1 1 300px; /* Grow, shrink, minimum 300px */
}

align-content

When items wrap to multiple lines, align-content controls space between the lines (only works with flex-wrap: wrap):

CSS

.stretch { align-content: stretch; }         /* Lines stretch (default) */
.start { align-content: flex-start; }        /* Lines pack to top */
.end { align-content: flex-end; }            /* Lines pack to bottom */
.center { align-content: center; }            /* Lines center */
.between { align-content: space-between; }    /* Equal space between lines */
.around { align-content: space-around; }      /* Equal space around lines */

The gap Property

gap adds space between flex items without using margins:

CSS

.container {
  display: flex;
  gap: 1rem;           /* Equal gap in all directions */
}

.container {
  display: flex;
  row-gap: 1rem;       /* Vertical gap */
  column-gap: 2rem;    /* Horizontal gap */
}

/* Shorthand: row-gap column-gap */
.container {
  display: flex;
  gap: 1rem 2rem;
}

Gap is better than margins because it only adds space between items, not on the outer edges.

flex-flow Shorthand

Combines flex-direction and flex-wrap:

CSS

/* flex-flow: direction wrap */
.container {
  flex-flow: row wrap;
}

.sidebar-layout {
  flex-flow: column nowrap;
}

Common Flexbox Layouts

CSS

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

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

Card Row

CSS

.card-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 280px;
  padding: 1.5rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

CSS

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}

.footer-section {
  flex: 1 1 200px;
}

Vertical Centering

CSS

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
}

Summary

Flexbox container properties give you powerful control over one-dimensional layouts. Use flex-direction for flow direction, justify-content for main-axis alignment, align-items for cross-axis alignment, flex-wrap for wrapping, and gap for clean spacing. Flexbox is ideal for navigation bars, card rows, centering content, and any layout that flows in one direction.

Flexbox Deep Dive: Mastering Container Properties