Flexbox Test Fixture

flex-direction: row

A

B

C

flex-direction: column

A

B

C

justify-content

Start

B

C

Center

B

C

End

B

C

Between

B

C

Around

B

C

align-items

Start

Tall

C

Center

Tall

C

End

Tall

C

Stretch

Tall

C

flex-wrap

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Gap

4px

gap

items

24px

gap

items

flex-grow / flex-shrink / flex-basis

grow:1

grow:2

grow:0

flexible

shrink:0 (200px)

basis:100px

basis:200px

grow:1