Flexbox Demo

Flexbox Demo #1

Flex-grow: 1
Flex-grow: 1
Flex-grow: 1
Flex-grow: 1
Flex-grow: 1
Flex-grow: 1

Flexbox Demo #2 (justify-content: space-around)

Flexbox Demo #3 (justify-content: space-between)

Flexbox Demo #4 (justify-content: space-evenly)

Flexbox Demo #5 (flex-direction: Row-reverse;)

1
2
3
4
5
6

Flexbox Demo #6 (flex-wrap: wrap;)

Flex-grow: 1;
Flex-grow: 1;
Flex-grow: 1;
Flex-grow: 1;
Flex-grow: 1;
Flex-grow: 1;

Flexbox Demo #7 (Flex-basis)

Flex-basis

Flexbox Demo #8 )

Flex-basis: 28%;
Flex-basis: 28%;
Flex-basis: 28%;
Flex-basis: 28%;
Flex-basis: 28%;
Flex-basis: 28%;
Flex-basis: 28%;
Flex-basis: 28%;
Flex-basis: 28%;