CSS Flexbox Test Page

1 — flex-direction

row (default)
A
B
C
flex-direction:row;gap:4px;
row-reverse
A
B
C
flex-direction:row-reverse;gap:4px;
column
A
B
C
flex-direction:column;gap:2px;width:60px;
column-reverse
A
B
C
flex-direction:column-reverse;gap:2px;width:60px;

2 — justify-content (row, 240px container)

flex-start
A
B
C
justify-content:flex-start;width:240px;gap:4px;
center
A
B
C
justify-content:center;width:240px;gap:4px;
flex-end
A
B
C
justify-content:flex-end;width:240px;gap:4px;
space-between
A
B
C
justify-content:space-between;width:240px;
space-around
A
B
C
justify-content:space-around;width:240px;
space-evenly
A
B
C
justify-content:space-evenly;width:240px;

3 — align-items (row, 80px container height)

flex-start
A
B
C
align-items:flex-start;height:80px;gap:4px;
center
A
B
C
align-items:center;height:80px;gap:4px;
flex-end
A
B
C
align-items:flex-end;height:80px;gap:4px;
stretch
A
B
C
align-items:stretch;height:80px;gap:4px;
baseline (varying font sizes)
A
B
C
align-items:baseline;gap:4px;

4 — flex-grow

grow:0,0,0 (none)
A grow:0
B grow:0
C grow:0
gap:4px;
grow:1,1,1 (equal)
A 1
B 1
C 1
gap:4px;
grow:1,2,3 (ratio)
A 1
B 2
C 3
gap:4px;

5 — flex-shrink & flex-basis

shrink:1,1 basis:120px (overflows 240px)
A 120
B 120
C 120
width:240px;
shrink:1,0 (C does not shrink)
A shr:1
B shr:1
C shr:0
width:240px;
flex:1 shorthand
flex:1
flex:2
flex:none
gap:4px;

6 — flex-wrap

nowrap (overflow)
A
B
C
flex-wrap:nowrap;width:200px;
wrap
A
B
C
flex-wrap:wrap;width:200px;gap:4px;
wrap-reverse
A
B
C
flex-wrap:wrap-reverse;width:200px;gap:4px;

7 — align-self (overrides align-items)

align-items:flex-start, item B → flex-end
A start
B end
C center
align-items:flex-start;height:80px;gap:4px;

8 — order

DOM order: A B C (order: 3 1 2)
A order:3
B order:1
C order:2
gap:4px;

9 — Nested flex containers

Col A row 1
Col A row 2
B1
B2
Col B row 2 (full width)

10 — inline-flex

Text before R G B text after — inline-flex sits in the text flow.

11 — max-width / max-height clamping

A max-width:80px, both grow:1
A
B
gap:4px;
column: A max-height:50px, both grow:1 (160px tall)
A
B
flex-direction:column;height:160px;gap:4px;width:80px;

12 — Percentage flex-basis

flex-basis:50% (240px container)
A 50%
width:240px;
column, auto height: flex-basis:50% falls back to content
A 50%
flex-direction:column;width:80px;

13 — flex-basis: content

flex-basis:content ignores explicit width:150px
Hi
gap:4px;

14 — Auto margins (main axis)

margin-left:auto pushes item to the end
A
width:240px;
margin:0 auto centers a single item
A
width:240px;
second item margin-left:auto pushes items apart
A
B
width:240px;

15 — Replaced elements (img/svg) mixed with block siblings

A flex container mixing an inline-level replaced element (an <img> or inline <svg>) with a block-level sibling wraps the replaced element in an anonymous box per CSS Flexbox §4 — it must still be measured, positioned, and painted like any other flex item.
img + block title
Account Statement
img width=48 height=48
inline svg + block title
Status: Active
inline <svg>