FlexBox Tests

The boxes are width and height 100px.

Row

Width unconstrained

Default

1
2
3

Width 250px

Default

1
2
3

Flex-wrap: nowrap

1
2
3

Flex-wrap: wrap

1
2
3

Flex-wrap: wrap-reverse

1
2
3

Flex-flow shorthand

flex-flow: row nowrap;

1
2
3

flex-flow: row wrap;

1
2
3

Column

Height/Width unconstrained

Default

1
2
3

Height 250px

Default

1
2
3

Also Width 250px

Default

1
2
3

Flex-wrap: nowrap

1
2
3

Flex-wrap: wrap

1
2
3

Flex-wrap: wrap-reverse

1
2
3

Flex-flow shorthand

flex-flow: column nowrap;

1
2
3

flex-flow: column wrap;

1
2
3

Grow/Shrink

Container has width of 500px

flex-grow: 4/2/0

1 I grow the most
2 I grow
3 I don't

Container has width of 250px

flex-shrink: 4/1/0

1 I shrink the most
2 I shrink
3 I don't