Flexbox Froggy
Flexbox Froggy allows you to enjoy your time learning about flex by providing an interactive game. There are a couple of uncovered features like grow/shrink/basis, but knowing how to properly position flex items is more important anyways. If it's introducing a topic, it will display the different value options, but otherwise you can challenge yourself to remember the values. It still allows you to manually view the values on every level in case you get stuck, though. There's also the option to remove directions altogether so you also need to figure out what properties to use. I believe the basic message being conveyed is that with flex, you can position anything anywhere on a page fairly easily, within a reasonably structured format. Overall, I find the most useful feature to be immediate visual feedback after typing something.
Josh Comeau Blog
In this post, there are plenty of in-depth explanations, interactive examples, and food metaphors. If you need to know anything about any part of flex, you will find it. There's even a little blip providing a different view on the CSS language itself. If all the words aren't enough, you can easily change around values for any possible situation in the interactive zones. There aren't really any parts where you can see multiple properties working at once except for when necessary, but with all the content already included, there isn't much of a need for that. Honestly, the food metaphors are perfect for tying the technical stuff to real-world objects. If all of that wasn't enough, it even goes into a couple of things that aren't possible. There's no justify-self since the middle item of the kebab is stuck between the others, and width is constrained to the size of the parent in flex. Overall, the article mentions that flex is about flexibility in layout, as you might expect.
Free Code Camp
If you want a slightly more concise and technical explanation, then this page is for you. Unfortunately, there aren't any fun interactions, but at least the visuals are pretty decent. All of that aside, the main reason I picked this one as a unique resource is that it goes into a couple of properties I haven't seen yet. The first is inline-flex. Setting this still makes the flex children behave the same, but the flex container itself gets to fall inline with other inline elements by using only as much space as it needs. If you look at my assignment this week, you may notice the comments meta being higher on the card than the button. I now think that where it is helps fill in space better than my original intention of putting it on the same line as the button, but maybe this would've helped with that. The other property is a shorthand: place-content. This takes care of align-content and justify-content respectively. There's not much else to say about it; it was just new to me. Overall, alignment and distribution of space are the best ways to describe the point of flex.
Summary
No matter your experience with CSS, plenty of resources exist to help you understand the complexities of flex. Honestly, just reading about it makes it seem so simple to implement, but you could definitely run into unexpected behavior if you do too much. Plus, there are things I think you need to know before even starting with flex like the fact that elements stretch on the cross axis.