Introduction:
In learning CSS, Flexbox is a more practical CSS layout property, but very complex, some people may not be able to quickly master, today I want to recommend a game related to this, learn Flexbox in the game, this is not a people feel very happy thing?
The game is introduced
Check out the author’s description of the game.
I made a CSS Flexbox learning game called Flexbox Froggy. The goal of the game is to help frogs reach their blinds by writing CSS code. See if you can beat all the levels!
Flexbox Froggy was inspired by classic arcade game Frogger, as well as online literacy games such as the excellent CSS Diner and Erase All Kittens, which teach you CSS selectors and HTML tags respectively.
Part of the reason I chose CSS Flexbox is that its layout properties make the game mechanics great. The levels are similar to the “locating zombies” campaign I featured in the Mozilla Thimble tutorial, but use the powerful new Flexbox model instead of absolute positioning.
Flexbox is also a good topic to talk about, as beginners can learn about this improved positioning method directly, while many experienced Web developers are not familiar with it and can finally use it. It’s something I’ve wanted to learn myself for some time. Tutorials like CSS Tricks, Codrops, and Scotch. IO are top notch, but there are few interactive learning experiences.
Try to feel
It was great to learn Flexbox by jumping from a simple frog position to a lotus leaf and designing different layouts based on the corresponding properties. Let me briefly capture some property screenshots.
justify-content:flex-end
justify-content:center
justify-content:space-around
align-items:flex-end
There is also a layout that combines properties
Other not a list, or very interesting, like can go to see ha.
The last
Follow the public account “front-end development blog”, reply flexbox, enter the game to learn.