Design opportunities with Flexbox are AAAAmazing...

You only need a bit of practice to master this skill. That’s why we created a comprehensive guide with syntax explanations and real life design examples that you can interact with.

Flex your design muscle!

The more you use Flexbox, the cooler it gets. Position elements and content, control alignment and size, reorder items in a few clicks with the visual CSS controls. These addictive controls are currently available within Responsive Foundation Framer, Bootstrap Builder, and RSD.

To get you into the flex-groove we created this guide with examples that you can toy around with yourself. Without having to know the flexbox syntax — you will simply learn as you go!

This interactive guide is wrapped inside the wildly popular front-end tool, Responsive Site Designer. Download the app and launch it from the tutorial themes selector. While you’re there check out yet another flexbox guide shows you how to use flexbox for making tables. Yup, pretty cool stuff indeed!

Go ahead, grab the free trial for OS X or Windows (even both if you’re into that) and get flexy!

This guide can also be read online. It just won’t be interactive and less fun....the choice is yours!

Like what you see? Tweet about the free interactive Flexbox guide and you might win a groovy t-shirt.