CSS Flexbox Cheatsheet
This page is pretty cool. It lists out and illustrates with super simple graphics what the different properties and their values are for the parent containers and children. The page makes it really easy for visual thinkers, like myself, to understand how CSS flex works. It shows display, direction, wrap, justify and the other properties and shows how they work on the page.
CSS Flexbox Generator
This page briefly explains what flexbox is and the properties that a developer can use to shape The content on a page. The first thing a user sees when the page loads is a large textbox where content can be inserted. Underneath the textbox is a form with radio buttons that can be clicked to set up the properties and values that can be used. Under that as display areas with the appropriate code for container and item. It looks like it would make it pretty easy try different ways to code flex for a page.
Free Code Camp: CSS Flexbox explained
This page caught my eye because it opens with a splashy graphic. After a table of contents there are 22 sections with explanations of what flexbox is, how to use it, and the associated properties. The explanations are easy to understand. It has code examples upon which a developer can build. There are notes included to explain the concepts. Within each section for the container properties there is a figure to show the results of the different property values. After that it does the same in the item sections
Summary
Of course there are explanations and examples on W3Schools and MDN, which I also read through, there are so many more. It is a lot of fun going through and reading the different pages and their explanations from the very basic cheatsheet, with a totally visual approach to the Free Code Camp page that explains the concepts in great detail. I plan to utilize all three to code my homework this week.