display: flex

What is Flexbox?

Flexbox is a one-dimensional layout model — it arranges items in a single row or column at a time. Add display: flex to a container element and its direct children automatically become flex items. It is ideal for navigation bars, button groups, aligned cards, and any UI that needs items distributed along one axis.

The Two Axes

main axis (flex-direction: row)
cross axis
1
2
3
.container {
  display: flex; /* turns on flexbox */
}
/* All direct children are now flex items */
flex-direction

Flex Direction

Sets which direction the main axis runs — and therefore which way items flow. Default is row (left to right).
1
2
3

live: flex-direction: row;

1
2
3
row

Left → right (default)

1
2
3
row-reverse

Right → left

1
2
3
column

Top → bottom

1
2
3
column-reverse

Bottom → top

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}
justify-content

Justify Content

Distributes items along the main axis. In a row container this is horizontal alignment; in a column container it is vertical.
1
2
3

live: justify-content: flex-start;

1
2
3
flex-start

Packed to start (default)

1
2
3
flex-end

Packed to end

1
2
3
center

Centered

1
2
3
space-between

Max gap, no outer space

1
2
3
space-around

Equal space each side

1
2
3
space-evenly

Identical space everywhere

.container {
  display: flex;
  justify-content: flex-start;
  /* flex-start | flex-end | center
     space-between | space-around | space-evenly */
}
align-items

Align Items

Aligns items along the cross axis. In a row this controls vertical alignment. The default stretch makes every item as tall as the tallest sibling.
1
2
3

live: align-items: stretch;

1
2
3
stretch

Fill cross axis (default)

1
2
3
flex-start

Aligned to start

1
2
3
flex-end

Aligned to end

1
2
3
center

Centered

1
2
3
baseline

Text baseline aligned

.container {
  display: flex;
  align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
}
flex-wrap

Flex Wrap

By default all items are forced onto one line. flex-wrap: wrap allows items to flow onto a new line when the container runs out of space.
1
2
3
4
5
nowrap

All on one line — items overflow (default)

1
2
3
4
5
wrap

Items wrap to new lines

1
2
3
4
5
wrap-reverse

Items wrap upward

.container {
  display: flex;
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
}
align-content

Align Content

When items wrap into multiple rows, align-content distributes those rows on the cross axis — just like justify-content handles items on the main axis. Has no effect with a single row (flex-wrap: wrap must be set).
1
2
3
4
5
6
flex-start

Rows packed to start

1
2
3
4
5
6
flex-end

Rows packed to end

1
2
3
4
5
6
center

Rows centered

1
2
3
4
5
6
space-between

Max space between rows

1
2
3
4
5
6
space-around

Equal space each side of rows

1
2
3
4
5
6
stretch

Rows stretch to fill (default)

.container {
  display: flex;
  flex-wrap: wrap; /* required */
  align-content: flex-start;
  /* flex-start | flex-end | center | space-between | space-around | stretch */
}
gap

Gap

Adds space between flex items without affecting the outer edges. Use gap for both row and column gutters, or row-gap/column-gap individually.
1
2
3
gap: 0

No space

1
2
3
gap: 8px

8px between each item

1
2
3
gap: 20px

20px between each item

.container {
  display: flex;
  gap: 16px;          /* row-gap + column-gap in one */
  /* row-gap: 8px;    only between wrapped rows */
  /* column-gap: 16px; only between columns */
}
flex-grow

Flex Grow

Defines how much free space an item absorbs. Value is a proportion — flex-grow: 2 takes twice as much remaining space as flex-grow: 1. Default is 0 (no growing).
1
2
3
all flex-grow: 0

Items keep natural size; space is left over

1
2
3
all flex-grow: 1

Items share remaining space equally

1
2
3
item 2: flex-grow: 2

Item 2 takes twice the free space

.item          { flex-grow: 0; } /* default — does not grow */
.item-fill     { flex-grow: 1; } /* absorbs all free space */
.item-priority { flex-grow: 2; } /* absorbs 2× more than flex-grow:1 siblings */
flex-shrink

Flex Shrink

Controls how much an item shrinks when the container is too small. Default is 1 (all shrink equally). Set to 0 to prevent an item from ever shrinking.
1
2
3
all flex-shrink: 1 (default)

All items shrink proportionally to fit

1
2
3
item 2: flex-shrink: 0

Item 2 holds its size; siblings absorb the squeeze

.item       { flex-shrink: 1; } /* default — can shrink */
.no-shrink  { flex-shrink: 0; } /* never shrinks below its basis */
flex

The flex Shorthand

Combines flex-grow, flex-shrink, and flex-basis into one property. The most common value is flex: 1 which expands to 1 1 0% — items start at zero width and grow equally.
1
2
3
flex: 1

Equal share — expands to 1 1 0%

1
2
3
flex: 0 0 auto

No grow, no shrink — natural content size

1
2
3
2 on item 2

Item 2 is twice as wide as its siblings

/* flex: <grow> <shrink> <basis> */
.equal   { flex: 1; }          /* → 1 1 0%  — equal share of space */
.fixed   { flex: 0 0 200px; }  /* locked at exactly 200px */
.double  { flex: 2; }          /* takes 2× the space of flex:1 siblings */
.natural { flex: none; }       /* → 0 0 auto — keeps content size */
align-self

Align Self

Overrides align-items for one specific item. Only the item it is applied to is affected — the container setting still controls all others.
1
2★
3
flex-start

Pinned to start

1
2★
3
flex-end

Pinned to end

1
2★
3
center

Centered on cross axis

1
2★
3
stretch

Stretch to fill height

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

.special   { align-self: flex-end; } /* overrides for this item only */
order

Order

Changes the visual order of items without touching the DOM. Lower order values appear first. All items default to order: 0. Useful for responsive reordering.
A
B
C
default (order: 0)

Visual order matches source order: A B C

C
A
B
order: -1 on C

C appears first — lower value wins

.item-C { order: -1; } /* appears before all order: 0 items */
.item-A { order: 0;  } /* default */
.item-B { order: 1;  } /* appears last */

/* ⚠ Screen readers follow DOM order, not visual order */

Your certificate is waiting

Complete all 6 challenge levels to unlock your personalized certificate

0/6 levels completed

Progress is saved locally in your browser.