Enhancing Responsiveness with Flexbox

Flexbox and responsive web design go great together, like peanut butter and jelly. Flexbox gives you more control over the things you care about in a responsive layout—like order, alignment, and proportional sizes of your boxes—and lets the browser figure out the rest—the math-y stuff that computers are good at, like the exact dimensions that are needed on the boxes to perfectly fill the available space. You can create much more complex and reliable layouts with flexbox than you can with floats, table display, or inline-block, all with far less CSS.

In this talk, you’ll learn which features of flexbox are particularly suited to responsive layouts and how you can harness them today by applying flexbox as progressive enhancement. We’ll look at examples of responsive page components and patterns that you can enhance further by layering flexbox on top of other layout methods, ensuring all users get a good experience.