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