Flexbox Demo

Flexbox Demo #1 | flex-grow

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

Flexbox Demo #6 | flex-wrap: wrap;

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

Flexbox Demo #7 | align-self

Flexbox Demo #8 | flex-basis

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;