When I first started learning about flex and was trying to practice in learn I found Flexbox Zombies. It is a game where players use CSS flexbox properties as weapons to defeat the zombies. It is a pretty useful way to practice as there is lots of repetition. The challenges build ontop of one another, gradually increasing complexity as the player progresses through the story.
Play Flexbox ZombiesAnother site I have personally used is MDN Web Docs. Their documentaion covers all aspects of the Flexible Box Module. Tons of practical examples are given and plenty of guides starting from the very basics to the advanced concepts. They help by explaining a lot of the underlying concepts while adding simple visuals.
MDN Web DocsI have not used this one before today, but decided to look at what other Flex games were out there. This one seemed interesting. Again it is a game that is teaching Flexbox concepts through gameplay. The players position defense towers using flexbox properties to stop the bad guys from getting through. There are 12 levels, each level provides immediate feedback on your code choices which helps you understand what each property is doing and how to use them all together in an effective manner to achieve results.
Flexbox DefenseThese three resources offere some different approaches to learning CSS Flexbox. While MDN is more technical it covers all from the foundation to advanced concepts. Flexbox Defense is a game where you position defense towers using flexbox properties with 12 increasing difficulty levels. Flexbox Zombies is another game that I found useful where you defeat zombies by learning flexbox. All Together thse cover the technical knowledge and practical application of CSS Flexbox through different learning styles.