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

Flex shorthand

flex: initial;

1
2
3

flex: auto;

1
2
3

flex: none;

1
2
3

flex: 1/2/3;

1
2
3

flex: 0 0 0;

1
2
3

flex: 0 0 0; flex-direction: column;

1
2
3

flex: 1 2 0;

1
2
3

flex: 0 1 2; (Invalid)

1
2
3

flex: 4/1/0 0 50px;

1
2
3

flex: 80% 0 4/1/0;

1
2
3

flex: auto 0 4/1/0;

1
2
3