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

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

Flexbox Demo #9 - (align-items;)

Flexbox Demo #10 - (align-content;)

Flexbox Demo #11 - (order;)

#1

#2

#3

#4