Flexbox demo

Flexbox Demo #1 (flex-grow: 1 for filling space, 0 for fixed size)

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)

This demonstrates how using flex-direction can change the order of items using CSS styling.

Flexbox Demo #6 (flex-wrap;)

Here we have an example of how row wrap and justify-content: space evenly creates consistent minimum sizes
and wrap containers onto the next row.

Flexbox Demo #7

Flexbox Demo #8

Flex-basis works similarly to flex-wrap, but instead of utilizing multiple styling elements, flex-basis can utilize consistent sizes in relation to window size.