CSS Flex

Flex Resource 1

First, I found this very useful website called "FlexBox.help" which allows you to create your flexbox layout with flex properites and values to add into your CSS and HTML to have a template. As someone who has a difficult time understanding display: flex, this tool can be very helpful to get an idea of what kind of layout you want for your page. Once you have the layout you like, the site provides the CSS output to add in afterwards by simply copy and pasting.

Link to Resource 1

Flex Resource 2

Another site I found providing a tool called "Build with Flexbox" which essentially does the same thing but allows you to add values to other properties that weren't included in the first site such as flex grow, shrink and basis then also allowing you to add width, padding, margin and height to the child.

Link to Resource 2

Flex Resource 3

The last tool I found was like the first one I found, simple and very useful. This site doesn't have much of a difference to offer other than the user ability but it is another tool out there that can be useful when learning or using flex.

Link to Resource 3

Summary

Overall, these 3 tools can be valuable to a beginner or someone who has a hard time with flex. I think these tools can work on giving the developer a better understanding with what the properties and values do by testing and playing with the tools. Also, the Second resource site I think is a little more helpful as it gives you more things to test on the children of the container.