Flex Box Demo Application

A demo of flex box, based on this article by CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This is a simple web app that I designed to help others learn about flex box properties and values. I learned a lot from the article listed above and wanted to learn more by teaching others! Hope you enjoy! 🙂...

You can find a modal for a dictionairy of terms and basics (book icon) at the top, along with a modal for background information about flex box (i).

How to use

I'd suggest just diving in, but in general you are presented a list of properties of flex box, first properties of the parent and then properties of the children.

Go through each and play around with how the values affect your boxes. Add more boxes, remove boxes, change their size.

Code display

There are two tabs, the first shows the underlying CSS that is creating the changes you see. The second tab will show you what utility classes would be used in coordination with Tailwind CSS, a very popular CSS framework.

Focus on a single child

You can click any of your boxes to see the styles for that box alone.

Skip ahead

Use the table of contents at the top to search through or browse through properties.

Keep properties on the screen

If you click the { } next to each of the properties in your table of contents, those properties will persist - in addition to the properties being displayed.