Flexbox Playground

Container Flexbox Configuration

Flex direction

Row

Row reverse

Column

Column reverse

Justify content

Flex start

Flex end

Space between

Space around

Space evenly

Align items

Flex start

Flex end

Center

Stretch (won't work, size box is fixed!)

Flex wrap

Nowrap

Wrap

Wrap reverse

Flexbox Child Container Content Configuration

Flex direction

Row

Row reverse

Column

Column reverse

Justify content

Flex start

Flex end

Space between

Space around

Space evenly

Align items

Flex start

Flex end

Center

Stretch

Child 1

Child 2

Child 3.1

Child 3.2

Child 4

Child 5.1

Child 5.2

Child 6