CSS Flexbox — Demo

This page covers Flexbox (Flexible Box Layout): display: flex, direction, wrap, justify-content, align-items, gap, and flex properties on children. Each example shows output and code.

1. display: flex

On a container, display: flex makes its direct children flex items. By default they line up in a row, shrink to fit, and stretch vertically.

Output
A
B
C
Code 
.container {
  display: flex;
}
Explanation: The container becomes a flex container. Its direct children (flex items) are laid out in a row by default. The main axis is horizontal; the cross axis is vertical. Only direct children participate — grandchildren are not flex items.

2. flex-direction

Controls the main axis direction. Values: row (default), row-reverse, column, column-reverse.

Output

row

1
2
3

column

1
2
3
Code 
.container { display: flex; flex-direction: row; }      /* default */
.container { display: flex; flex-direction: column; }
Explanation: row = main axis horizontal, left to right. row-reverse = right to left. column = main axis vertical, top to bottom. column-reverse = bottom to top.

3. justify-content — main-axis alignment

Aligns flex items along the main axis. Values: flex-start, flex-end, center, space-between, space-around, space-evenly.

Output

flex-start

A
B

center

A
B

space-between

A
B
C
Code 
.container { justify-content: flex-start; }  /* default: start of main axis */
.container { justify-content: center; }
.container { justify-content: space-between; }  /* space between items, none at edges */
Explanation: flex-start = pack at start. flex-end = pack at end. center = pack in the middle. space-between = equal space between items, no extra at edges. space-around = space around each item (half at edges). space-evenly = equal space everywhere.

4. align-items — cross-axis alignment

Aligns flex items along the cross axis (perpendicular to main). Values: flex-start, flex-end, center, stretch (default), baseline.

Output

align-items: center

Short
Tall
Short

align-items: flex-end

Short
Tall
Code 
.container { align-items: flex-start; }  /* top of cross axis */
.container { align-items: center; }
.container { align-items: stretch; }   /* default: fill cross axis */
Explanation: When main axis is row, cross axis is vertical. flex-start = top; flex-end = bottom; center = middle; stretch = fill height. baseline = align by text baseline.

5. flex-wrap

Whether flex items wrap to the next line when there’s not enough space. Values: nowrap (default), wrap, wrap-reverse.

Output (wrap)
1
2
3
4
Code 
.container {
  display: flex;
  flex-wrap: wrap;
}
Explanation: nowrap = all items stay on one line (may shrink). wrap = items wrap to next line when needed. wrap-reverse = wrap in reverse order. Use wrap for responsive layouts.

6. gap

Adds space between flex items (and between rows when wrapped). Values: gap: 10px, gap: 10px 20px (row gap, column gap), or row-gap / column-gap separately.

Output
A
B
C
Code 
.container {
  display: flex;
  gap: 16px;
}
Explanation: gap adds space between items without using margins. Shorthand: gap: row-gap column-gap. One value applies to both. Supported in all modern browsers.

7. flex-grow, flex-shrink, flex-basis

On flex items, these control how items grow or shrink when there’s extra or less space. Shorthand: flex: grow shrink basis.

Output (flex: 1 1 0 — equal width)
1
2
3
Output (flex: 2 1 0 — middle one twice as wide)
1
2 (grow 2x)
3
Code 
/* equal width */
.item { flex: 1 1 0; }  /* grow: 1, shrink: 1, basis: 0 */

/* middle item twice as wide */
.item-2 { flex: 2 1 0; }
Explanation: flex-grow: 1 = take equal share of extra space. flex-shrink: 1 = shrink when needed. flex-basis: 0 = start from zero, let grow/shrink control size. flex: 1 is shorthand for 1 1 0.

8. align-self — override for one item

On a flex item, align-self overrides align-items for that item only. Values: flex-start, flex-end, center, stretch, baseline, auto.

Output
start
align-self: center
align-self: end
Code 
.item { align-self: center; }
.item { align-self: flex-end; }
Explanation: Use align-self when one item needs different cross-axis alignment than the others. auto uses the container’s align-items.

9. order

Controls the order of flex items. Default is 0. Lower values appear first; higher values appear later.

Output
A (order: 3)
B (order: 1)
C (order: 2)
Code 
.item-a { order: 3; }
.item-b { order: 1; }
.item-c { order: 2; }
Explanation: Order only affects visual display, not the DOM. Use for reordering without changing HTML (e.g. mobile-first layout). Values can be negative.

10. align-content — multi-line cross-axis

When flex items wrap into multiple lines, align-content aligns those lines along the cross axis. Only applies when flex-wrap: wrap and there are multiple lines.

Output (align-content: space-between)
1
2
3
Code 
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
Explanation: Same values as justify-content: flex-start, center, space-between, etc. Controls spacing between rows when there are multiple rows.

11. Quick summary