Rocket Ship

Flexbox is the Future

Have you ever spent hours agonizing over a CSS layout that just wouldn't work? Have you struggled with columns, vertical centering, floats or inline displays? Have you even, gasp, given up and used tables for your layouts?

It’s time to say goodbye to all that pain. Flexbox is a new CSS standard that lets you create fluid application layouts with very little effort. It works in all modern browsers, and you don’t need any special tools or languages to use it.

Browser support for flexbox has come a long way in the last few years. 98.6% of people are running a browser that supports flexbox, and that number is growing every day. There’s no reason to wait to use flexbox!

What's Inside the Book?

Unraveling Flexbox is a practical guide that will teach you the skills you need to apply flexbox in the real world. With it, you'll learn how to:

  • Real Applications Icon

    Build layouts for actual applications. These aren’t your grandma’s flexbox layouts.

  • Use Flexbox Today Icon

    Use flexbox in production today, not five years from now.

  • Pure CSS Icon

    Write flexbox in pure CSS without the need for vendor prefixes, polyfills, libraries or hacks.

  • Quirks Icon

    Sidestep the major flexbox browser bugs, quirks and inconsistencies.

  • Responsive Icon

    Create responsive flexbox layouts that work great on phones, tablets, desktops and everything in-between.

  • Older Browsers Icon

    Gracefully degrade on older browsers without reimplementing your layouts.

  • Grid System Icon

    Write your very own responsive grid system. Say goodbye to clunky float-based layouts.

What Are People Saying?

The Layouts

Every principle you’ll learn in this book is backed by a real world example. These are some of the layouts you'll learn how to build.

Dice
Dice
Video Player
Video Player
Pricing
Pricing
12 Columns
12 Columns
Forms
Forms
Calendar
Calendar
Minesweeper
Minesweeper
Golden Rectangle
Golden Rectangle
Photo Gallery
Photo Gallery

Frequently Asked Questions

Can I really use flexbox today? Is it supported on IE?

Flexbox is now supported by 98.6% of all internet traffic! The best kept secret of flexbox is that you can use it today and it will work almost everywhere!

Flexbox works great in all modern browsers, including Internet Explorer 10+, Firefox, Chrome, Safari, Opera, iOS Safari, Opera Mini, Android 4.1+ and Chrome for Android.

What about older browsers? I need to support IE9. How does my site display on browsers that don’t support flexbox?

In this book, you’ll learn how to leverage progressive enhancement to display a simpler layout on older browsers.

Ugh, I hate all those vendor prefixes. Is there a way I can write flexbox without them?

Yes! In the book, I’ll show you how to set up your environment so you can ignore all vendor prefixes. You’ll write your code once, and it will work everywhere!

Why don’t I just use a CSS framework like Bootstrap or Foundation? Don’t those already have a grid system?

Bootstrap and Foundation include basic 12-column grid systems. For more complex layouts they fall short. Those frameworks are also bloated monsters, adding a lot of weight and complexity to your site. If all you’re looking for is a grid, flexbox is lightweight, portable and powerful.

Is flexbox even standardized yet?

Flexbox has stabilized and is implemented in all major browsers. At this point, the specification is extremely unlikely to change.

Download Unraveling Flexbox

Download Unraveling Flexbox for free and see how awesome it is for yourself.