Skip to main content

Flex Containers: The Parent Properties

Flexbox is activated on a parent element (the flex container). All direct children automatically become flex items. The container's properties control how items are arranged as a group.

1. Enabling Flexbox​

.container { display: flex; }         /* Block-level flex container */
.container { display: inline-flex; }  /* Inline-level flex container */

2. flex-direction — The Main Axis​

Defines the direction items flow. This sets the main axis (the direction flex-grow/shrink works).

.container {
  /* ← → */  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 */
}

3. justify-content — Alignment on the Main Axis​

Controls how items are aligned along the main axis (the flex-direction axis).

.container {
  justify-content: flex-start;     /* (default) Items at the start */
  justify-content: flex-end;       /* Items at the end */
  justify-content: center;         /* Items centered */
  justify-content: space-between;  /* First/last at edges, rest evenly spaced */
  justify-content: space-around;   /* Equal space around each item */
  justify-content: space-evenly;   /* Equal space everywhere (including edges) */
}

4. align-items — Alignment on the Cross Axis​

Controls how items are aligned on the axis perpendicular to flex-direction.

.container {
  align-items: stretch;      /* (default) Items stretch to fill container height */
  align-items: flex-start;   /* Items align to the top (or left if column) */
  align-items: flex-end;     /* Items align to the bottom */
  align-items: center;       /* Items centered on cross axis */
  align-items: baseline;     /* Items align by their text baseline */
}

5. align-content — Multi-Line Alignment​

Applies only when flex-wrap: wrap is set AND items are wrapping across multiple lines:

.container {
  flex-wrap: wrap;
  align-content: stretch;        /* (default) Lines stretch to fill */
  align-content: flex-start;     /* All lines at the top */
  align-content: flex-end;       /* All lines at the bottom */
  align-content: center;         /* Lines centered vertically */
  align-content: space-between;  /* Lines spread out */
}

6. flex-wrap — Single vs Multi-Line​

.container {
  flex-wrap: nowrap;        /* (default) All items on one line — may overflow */
  flex-wrap: wrap;          /* Items wrap to new lines as needed */
  flex-wrap: wrap-reverse;  /* Items wrap to new lines in reverse direction */
}

7. gap — Spacing Between Items​

Modern replacement for margin-based spacing in flex containers:

.container {
  gap: 1rem;           /* Same gap in both directions */
  row-gap: 1.5rem;     /* Vertical gap (between rows) */
  column-gap: 1rem;    /* Horizontal gap (between columns) */
}

[!TIP] Using gap instead of margin on items eliminates the need to remove margin from the first/last item. It also works identically in CSS Grid.

8. flex-flow — Shorthand​

Combines flex-direction and flex-wrap:

.container { flex-flow: row wrap; }          /* Default grid-like behavior */
.container { flex-flow: column nowrap; }     /* Vertical single column */

9. Main Axis vs Cross Axis Summary​

  flex-direction: row (default)
  ┌──────────────────────────┐
  │  ··│  ITEM A  │  ITEM B  │
  │    │          │          │  ← Cross axis (vertical)
  │  ··│          │          │
  └──────────────────────────┘
       ←──── Main axis ────→

  flex-direction: column
  ┌──────────────────────────┐
  │      ↑ Main axis         │
  │    ┌────────────────┐    │
  │    │     ITEM A     │    │ ← Cross axis (horizontal)
  │    ├────────────────┤    │
  │    │     ITEM B     │    │
  │    └────────────────┘    │
  │      ↓                   │
  └──────────────────────────┘

10. Quick Centering Reference​

/* Center both axes — the most common use case */
.center-both {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Place-content is shorthand: place-content: align-content justify-content */
.center-both { display: flex; place-content: center; }

/* This single line centers ANYTHING inside a container */
.hero { display: flex; place-content: center; place-items: center; min-height: 100dvh; }