flex, part 2 — item properties (flex1.html = container properties)

order

order: 3 / 1 / 2

painted b c a
a
b
c

order: -1 on c

c jumps to the front
a
b
c

flex-grow / flex-shrink

flex-grow: 0 / 1 / 2

40 / 80 / 120
a
b
c

flex-grow: 0.5 (sum < 1)

only half the free space
a

flex-shrink: 0 / 1 / 2

100 / 80 / 60
a
b
c

flex-basis

flex-basis: auto

width wins: 60
a
b

flex-basis: 0 (flex: 1 1 0)

equal 120 / 120
a
bbbbbbbbbb

flex-basis: 80px

beats width: 20px
a
b

flex-basis: 25%

60 of 240
a
b

flex-basis: content

content basis ignores width:20px
a
bbbbbbbbbbbb

flex-basis: 50% in a column

% of the 200px height
a
b

the flex shorthand

flex: initial (0 1 auto)

no growing: 60 / 60
a
b

flex: auto (1 1 auto)

60 + half of 120 = 120
a
b

flex: none vs flex: 1

60 / 180
a
b

flex: 1 x3

80 / 80 / 80
a
b
c

flex: 2 1 100px / 1 1 40px

166.7 / 73.3
a
b

align-self (container align-items: center, h=60)

align-self: auto

follows align-items: y=20
x

align-self: flex-start

y = 0
s

align-self: flex-end

y = 40
e

align-self: center

overrides flex-start: y=20
c

align-self: stretch

h = 60
s

align-self: baseline

beats align-items: flex-end
a
b

auto margins & the flex minimum

margin: 0 auto

centred: x = 100
a

margin-left: auto on b

b pinned right: x = 200
a
b

min-width: auto

a cannot shrink under its word
supercalifragilisticexpial
b

min-width: 0

the same, now 120 / 120
supercalifragilisticexpial
b

nested flex

2 x (2 x 60)
a
b
c
d
running...