Flexbox demo 3. Centering, alignment, justification, changing order

1

DEMO: simple centering, wrapping, re-ordering

Flex container options:
use a vertical layout
center on main axis
center on cross axis
show 2nd child

2

Checkbox below creates more children and enables wrap (sets flex-wrap:wrap; on the flex container):

more kids, with wrap

Reminder: resize browser to re-flow items, esp. after changing flex value

3

Flex items

Initially item dimensions are height:195, width:220 and items don't grow (default is flex:0 1 auto).

As for shrinking, remember that when wrapping is active items wrap before shrinking

4

Flex items dimensions. To change enter number (px):

Height:

Width:

Items have min-width/height 50px. Main axis size ignored unless flex-basis:auto

5

Set flex values (all items)

(see descriptions in primer)

flex:0 1 auto (default)
flex:1 0 auto
flex:1 1 50px+xstretch
flex:1 0 100%+contentsize
pack 'em in

6

Demo children have order set to their initial position (i.e. child2 has order=2). Options for child6:

set order: -1

Items can override align:

set align-item:flex-end