Speaker Deck

CSS Layout Techniques - Replacing Floats with Flexbox

by Bermon Painter

Published October 3, 2016 in Programming

Overview:
CSS floats have been the primary way that we define web layout for almost the past decade. They’ve worked pretty well over the years but times are changing. flexbox is becoming the new norm for layout and solves some of the main gripes we deal with when using floats. Some of the new concepts may be a bit difficult to grasp in the beginning but in this talk we’ll focus on practical ways that flexbox is used when creating modern interfaces.

Objective:
Give you a good overview of flexbox, how it works, the layout features available, and how to tackle typical modern interface designs.

Things Audience Members Will Learn:
1. Flexbox primer on alignment, direction, orientation, and order
2. Simple to complex design patterns
3. Accessibility & markup best practices
4. Browser support and what you can start to use now

Examples
https://codepen.io/collection/DbrpKV/