Flex Box Adventure

You read about flex box, know all the syntax, completed a lot of tutorials, but still have a struggle sometimes create a layout?

Learn flex box in a more effective and fun way.


In a game!

Flex Box Adventure is an educational game where you need to help Knight, Mage, and Rogue defeat waves of monsters using CSS flex box properties.

Are you ready to become a flex box hero?

Learn more about Flex Box

Every week, I send out my "3-2-1" newsletter for Web Developers with 3 hand-picked articles from me, 2 web development guides from others, and 1 useful Tweet I enjoyed.

Sign up with the form below join 1938+ developers who getting a new edition in your inbox every week.

    No spam. Unsubscribe anytime.

    What People Say

    What is Flex Box?

    Long time ago everyone used display: block, display: inline-block and display: table to create a complex layouts. But it has always been a pain for everyone. These properties lack the tools for making a responsive UI without using float or positioning. That is why flex layout was created.

    FlexBox layout is similar to block layout, except flex box provide powerful tools for distributing space and aligning content in elements. This allows us to build rich, complex, and modern layouts in a seconds.

    Created by @nickbulljs, inspired by flexboxfroggy.