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:
Build layouts for actual applications. These aren’t your grandma’s flexbox layouts.
Use flexbox in production today, not five years from now.
Write flexbox in pure CSS without the need for vendor prefixes, polyfills, libraries or hacks.
Sidestep the major flexbox browser bugs, quirks and inconsistencies.
Create responsive flexbox layouts that work great on phones, tablets, desktops and everything in-between.
Gracefully degrade on older browsers without reimplementing your layouts.
Write your very own responsive grid system. Say goodbye to clunky float-based layouts.
What Are People Saying?
Unraveling Flexbox is an utterly invaluable resource for all modern web developers and designers. It will revolutionize your CSS workflow so much you'll wonder how you ever made layouts before.Joshua Collinsworth, Engineer, Instructor and Designer at Flywheel
After reading Unraveling Flexbox, I confidently transitioned multiple projects from traditional grid systems to flexbox. The examples are so close to our agency's real world scenarios. I can't imagine going back to the old way of doing things.Andrew Shenstone, Developer at Ply Interactive
There are many flexbox tutorials on the Internet, but most of them only cover basic syntax and behavior. What interested me in buying Unraveling Flexbox was the real world examples, and it delivered.Duc Ho, Developer at EMC
Unraveling Flexbox is a worthwhile read. The examples given to demonstrate the features are excellent. Well done. I wouldn't hesitate to recommend it to others.Darrin Robertson, Sitefinity Developer
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.
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.