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)

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

Flexbox demo #7

flex-basis

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%;