This site gave great, visual instructions on how to use CSS Flex properties. Each of the main flex properties was listed with all of the values each can hold, and how that affects the display.
I found the section on align-content and align-items to be very helpful to further clarify how these properties work. I hadn't realized that the property/value of align-content: stretch would behave like it did. It stretches the content areas using the extra space in the parent container. All of the other align-content values use only the needed space.
The information & graphics for align-items also gave a great visual of where that cross axis is for each value used.
This site also offered great, detailed instructions on how to use all of the Flexbox layout options. He also included Codepen options to be able to view the code and play with it yourself. This is really helpful when learning code since the basic code is set up and you can change various factors to see the results.
His explanation of flex-grow and flex-shrink were really helpful for me to fully understand how to use these. He also created great Codepens to go with each of these that allow you to add or remove sections and change the grow or shrink properties of each to see the results. It is a great visual way to see the results of these properties.
At the end of this article, he offers a really neat Codepen that is a playground for all of the flex items in one place. You can adjust all of the properites, add or remove blocks, and even click on each block to set the order, flex info and margins. This site ranked my favorite due to the amount of interactive learning items he used.
This site offered another great option to go through each property and talk about how to use it and also offers really great visual representations of each property. Also, for some of the properties, there is a drop down of all of the value options. Changing this drop down, changes the visual display to show how it affects the end result. I like that this site's explanations were easy to understand. This along with the great visuals helped to give a better understanding of flex concepts. The explanation on this site of flex-grow was really helpful for me to even better understand how to use this property.
Flexbox is a really powerful tool to arrange items within a page when you want to use rows and columns. It helps align things properly, space them out, wrap when needed, and alter the order of items to create the perfect layout. I love using flex to create better spacing between items for a more uniform layout. All of these resources I mentioned offer great insights on how to use each property and visual guides to help understand them better.