Resource 1: MDN Web Docs
The first resource for helping us learn Flex is MDN Web Docs, a quality resource in many ways. They begin with showing us flex direction and how flex changes the movement of objects along a set path, and the difference between using flex row and flex column. They also give us ways to change the starting direction, properties to add after flexing something, and the use of Justify-content. They have much more information, but this covers the basics.
Resource 2: CSS Tricks
The second resource we will be looking at is CSS Tricks, a much more colorful but still straightforward guide to flexbox. While their guide focuses on many of the same aspects that MDN does, they go more into detail with the align-items and gap properties. More importantly, they do a great job of doing a side by side comparison of the parent container vs the child objects when using flex. A very informative guide, and handy for additional information.
Resource 3: W3schools
Last but not least, we have W3schools, which has the simplest of the three guides to flexbox. Their entire guide features the flexbox, flex container, flex items, and flex responsive pages. Similarly to the other two resources, examples and representations of content styled with flex are shown, but the uniqueness of w3schools comes from the ability for you to try working with the code on the site. While it is the smallest of the three guides from the outset, it has the most appeal in terms of working hands-on with the code.
Summary
In Summary, we talked about 3 different resources for learning about Flex. MDN Web docs, which has the most information and is the most straightforward, CSS Tricks which has a more colorful layout and a layout that shows the direct comparison between parent and child containers in flex, and last but not least, W3schools which has the smallest guide but allows you to test out the code on their site.