You’re a front-end engineer, weary from relying on float:lefts and display:table-cells. You’re also wary of the next big thing, after having gotten excited about “the next big thing” and seeing slow adoption from legacy browsers. It’s time to come in from the cold.
Over the last year, we’ve been exploring ways to make our site (IFTTT.com) faster. One of the techniques we’ve been happily surprised by is the new layout approach in Flexbox. With the more optimized and efficient DOM Flexbox lets you work with, it provides for a better experience all around. Responsive designs are easier to create, and faster to render.
Flexbox gives developers looking to create flexible, responsive layouts a fantastic option. Flexbox is two to three times faster than floats, inline blocks, and display:table-cell. I’ll show some benchmarks (both simplified test suites and real-world layouts), some live examples of Flexbox in action (like at IFTTT.com), and go through a couple of migrations to show how to transition from earlier layout techniques to Flexbox.
Some of the ground I’m planning to cover:
Charlie is an engineer at Slack, where he’s worked on front-end code since September of 2015. That followed a few years at IFTTT, which itself followed a half a decade running a subscription-based SaaS web app. He loves solving problems, reluctantly using code to do so.
Comments on this page are now closed.
©2015, O'Reilly Media, Inc. • (800) 889-8969 or (707) 827-7019 • Monday-Friday 7:30am-5pm PT • All trademarks and registered trademarks appearing on oreilly.com are the property of their respective owners. • email@example.com