Breaking Development: UI Design and Layout with CSS Flexbox

by Luke Wroblewski October 21, 2013

In his presentation at Breaking Development in Nashville TN, Stephen Hay shared the latest information about Flexbox. Here's my notes from his talk on Using Content To Define User Experience.

  • Imagine we could make code so easy that even designers could do it. That's the goal of many design tools: to protect designers from code. Instead, we should aim to make code easier for designers to use.
  • Designers are not stupid, they are capable of learning and would be happy to add code as another one of their tools. We have to make things easier. Flexbox is a step in the right direction.
  • It took about 2 years to write the first CSS spec and CSS has been around for 17 years. Now finally we have real layout tools with Flexbox.
  • CSS Flexbox has changed since the candidate recommendation last year. There's a new Editor's Draft last changed in October.
  • There are two specs that deal with page layout: Grid layout and template layout. Flexbox is really good for UI component layout.
  • Flexbox helps us deal with available space, even when we don't know what that space will be; with alignment both horizontally and vertically; and with display and source order differences.

Flexbox Overview

  • Leave your layout baggage at the door. Flexbox is different it abstracts a lot of terms like left or right.
  • Flex items are the things inside a flexible container and flexible by default. Even anonymous block boxes are a flex in of themselves.
  • When you make a flexible container, you tell things what direction you want things to flex in: row or column. This corresponds to main or cross axis. Start and end allow you to position things on each axis.
  • You can set direction within containers; definine how things grow, shrink, or fill in space; set auto-margins; center things on both axes; set a different display order can differ from source order in an HTML page.
  • Common use cases for Flexbox include: true centering of elements, unknown numbers of menu items (add or remove), source order different from display order, wrapping menu items, tab groups, and more.
  • Currently browser support for Flexbox is kind of funky but it is coming really fast. IE11, Chrome, Opera, Safari have good support. Older browsers support different versions of the syntax. 77% of browsers support flexbox but not the latest flexbox.