DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Maria del Carmen Santiago
Maria del Carmen Santiago

Posted on

The 3Gs of CSS3: FlexBox Edition

A Collection of Guides, Games, and Generators useful for your everyday CSS needs. The idea behind this collection is to help you become a better CSS developer by providing resources to help you understand the concepts and generators that will help you become more efficient.

Flexbox

Flexbox is a powerful layout tool that lets you solve responsive web design problems without needing to use media queries.

Guide

CSS Tricks has a complete guide with illustrations that will help you visualize the power of flexbox. You can even buy a poster from them to hang on your wall.

Flexbox guide Preview

Games

Move the froggy to the lilypad with FlexBox Froggy. A very simple kid-like game that will help you understand flexbox.

FlexBox Froggy screenshot

Kiddy games not your thing? How about a war-like game? With FlexBox Defense you have to stop the enemies from getting past your defense using the power of flexbox!

Flexbox Defense screenshot

You can kill zombies with FlexBox Zombies. This one follows a storyline so don’t forget that you are actually coding when playing this game.

Flexbox Zombies screenshot

Generator

Just because you understand a concept doesn’t mean you need to memorize everything. Flexy Boxes is an amazing tool to have when solving your layout problems. Add as many items as you need and see in real-time what each property will do to each of them.

Alt Text

Alternative: flexplorer

Bonus: VS Code Extension

I was not going to add this, but this extension got better with the last update and it is now more interactive! Check out CSS Flexbox Cheatsheet VS code extension. If you don’t know how to install this, you can take a look at my previous article on VS Code Extensions.

CSS Flexbox Cheatsheet


If you liked what you read hit that ❀️ on the left or wherever it is. If you really liked it don’t forget to share it with the community by hitting that dot-dot-dot icon near the heart.

πŸ’» article.close()

Top comments (1)

Collapse
santiagocodes profile image
Maria del Carmen Santiago Author

The 3Gs of CSS3: Grid Edition has been published. Go check it out!

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.