I have built a flex box playground, mainly so that I could wrap my head around flex box and how it will evolve in the future. When you think of flex box, you think of flexible, and that's exactly what it is.

Which way?

What really fascinated me the most was Flex direction. With Flex direction you can apply both row and column attributes to a flex container instantaneously. There is also the option to reverse the direction of flex items in a flex container with row-reverse and column-reverse.


Once you have have a Flex Direction applied to a container, you can now start adding individual elements with their own order number. Depending on what direction the container is set at (row, row-reverse etc), the elements will be displayed accordingly.

Flex Grow/Shrink

Pretty self explanatory, you can enlarge or shrink a flex element within the container. I have yet to come up with a practical reason to implement this. I have created a slider which uses this method, it is fun to play with :)


Hopefully this is helpful to someone, if I have confused you even more then I would suggest looking at these sources:

This is based on a challenge posted by Rach Smith on Twitter: https://twitter.com/rachsmithtweets/status/918630432370860032

3,486 0 32