flex, part 1 — container properties (flex2.html = item properties)

display / flex-direction / flex-flow

display: flex

3 x 40px, in a row
a
b
c

display: inline-flex

shrink-to-fit = 120px
abcafter

flex-direction: row-reverse

a at the right edge
a
b
c

flex-direction: column

auto height = 60px
a
b
c

flex-direction: column-reverse

h=60, a at bottom
a
b
c

flex-flow: column wrap

h=60; 2 columns stretch to 120
a
b
c
d

flex-wrap

flex-wrap: nowrap

3 x 100 shrink to 80
a
b
c

flex-wrap: wrap

c drops to line 2
a
b
c

flex-wrap: wrap-reverse

line 1 at the bottom
a
b
c

justify-content (main axis, 240 - 3x40 = 120 free)

justify-content: flex-start

0 / 40 / 80
a
b
c

justify-content: flex-end

120 / 160 / 200
a
b
c

justify-content: center

60 / 100 / 140
a
b
c

justify-content: space-between

0 / 100 / 200
a
b
c

justify-content: space-around

20 / 100 / 180
a
b
c

justify-content: space-evenly

30 / 100 / 170
a
b
c

align-items (cross axis, container h=60)

align-items: flex-start

y = 0
a
b

align-items: flex-end

y = 40
a
b

align-items: center

y = 20
a
b

align-items: stretch

auto height -> 60
a
b

align-items: baseline

b has padding-top:10
a
b

align-content (2 lines of 20 in h=120, 80 free)

align-content: flex-start

0 / 20
a
b
c
d

align-content: flex-end

80 / 100
a
b
c
d

align-content: center

40 / 60
a
b
c
d

align-content: space-between

0 / 100
a
b
c
d

align-content: space-around

20 / 80
a
b
c
d

align-content: space-evenly

26.7 / 73.3
a
b
c
d

align-content: stretch

lines 60 tall: 0 / 60
a
b
c
d

gap / row-gap / column-gap

column-gap: 20px

0 / 60 / 120
a
b
c

row-gap: 12px

line 2 at y = 32
a
b
c

gap: 8px 16px

row 8, column 16
a
b
c

column-gap: 10%

10% of 240 = 24
a
b
c
running...