Flexbox Demo

Flexbox Demo 1 (Flex Grow 1)

flex grow 1

flex grow 1

flex grow 1

flex grow 1

flex grow 1

Demo 2 (justify-content: space-around)

1

2

3

4

Demo 3 (justify-content: space-between)

1

2

3

4

Demo 4 (justify-content: space-evenly)

1

2

3

4

Demo 5 (flex-direction: row-reverse)

1

2

3

4

5

Demo 6 (flex-wrap: wrap)

flex grow 1

flex grow 1

flex grow 1

flex grow 1

flex grow 1

Demo 7 (Vertical Centering with align-self)

Center Me

Demo 8 (flex-basis: 25%)

flex basis 25%

flex basis 25%

flex basis 25%

flex basis 25%

flex basis 25%