If you have ever encountered difficulty learning Flexbox in CSS, here is an excellent solution: flexbox froggy. This website allows their learners to master flexbox by playing a simple game: placing the frogs on the proper lilypads in a pond.
In each level, you will learn different properties of flexbox, for example. In level one, it instructs you to use justify-content: flex-end; to move the frog to the right hand side of the pond.
As the game levels up, the users will be far more getting familiar with the properties such as align-items, flex-direction… Anytime you find yourself forgetting the possible values for a property, you don’t necessarily go back to the previous level but hover over the property name to view them. (How easy it is!!!!)
After 24 levels, you will likely be pretty much confident with CSS flexbox.
Hope you will have relaxing time learning and playing with Flexbox Froggy.