This site offered a really great visual walkthrough of building a flexbox layout for 2-3 items. It shows the code and a visual representation of each step of the process. Each step has a great explanation of what they want to accomplish each time, and how changing the code results in each visual that you see. When using Flexbox, for some reason I often get hung up on being able to get it to do exactly what I want. This visual display of the steps and how they got to the end result is a really helpful way to learn and see the results.
This site showed 8 different ways to use Flexbox to achieve a specific layout. They used a great visual for each code item. They showed how to do things like align one block item in various positions within the flex parent, how the different justify-content items aligned blocks, how to use flex-grow to add a space, how to create a column layout, how to build a responsive layout, and how to move single flex childs to different places. The site provides great instruction, the code for how to do it, and images to represent the end results. It was really helpful to visualize the outcomes of these different properties.
This site was really great. I loved that they included the Codepen blocks so that you can actually change the code real time to see the differences the numbers would make in the layout. They go through all of the aspects of flex layout to show how each property works and how to achieve various layouts and responsive design using flexbox. This site was really thorough and had some very helpful Codepens that allowed for easy changes to show the results. There were some near the end that had simple drop downs to choose different flex properties to instantly see the different results. This site was really helpful to me to learn more about flex and get a better understanding.
Flexbox is a really powerful tool to arrange items within a page when you want to use rows and columns and to have a mobile responsive site. It helps align things properly, space them out, wrap when needed, change placement, 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.