Flexbox Demo

Flexbox Demo #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

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

flew-grow: 1;

flew-grow: 1;

flew-grow: 1;

flew-grow: 1;

flew-grow: 1;

Flexbox Demo #7 (align-self: center;)

Flexbox Demo #8 (flex-basis: 25%;)

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;

flex-basis: 25%;