“Leveling Up With Flexbox”
With flexbox, you can create much more complex and reliable layouts than you can with floats, table display, or inline-block, all with far less CSS. Flexbox solves a lot of the shortcomings and annoyances of our current layout methods and makes building fluid and responsive layouts much easier.
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. In this workshop, you’ll learn how to take your designs—and web design skills—to the next level as we combine flexbox with other layout mechanisms and take advantage of its simple methods to size, align, and rearrange content.
What you’ll learn:
- How flexbox works and what new CSS properties it introduces
- Which browsers support flexbox and how to deal with the minority that don’t
- Practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with graceful fallbacks
- How to add flexbox to responsive UI components to enhance their flexibility further
- Tricks for using flexbox to solve common layout challenges like vertical centering, mixed-unit layouts, and content reordering
- When to use and not use flexbox in your production work today
