CSS Summit 2013: CSS3 and Flexbox

In his CSS Flexbox presentation for CSS Summit 2013 Day 1, James Williamson discussed the history and features in Flexbox. Williamson focused on improvements over current CSS methods, walked through code examples, and shared his thoughts on when and where to use Flexbox.


  1. CSS layout is challenging

    CSS should be easier. We spend our time finding/using CSS workarounds to manage layout.
  2. Flexbox basic concepts

    1. A new layout mode
    2. Similar to block layout
    3. Has amazing powers for managing flow. Elements can respond to available space, align to containers, direction up/down/left/right.
  3. To use Flexbox, you need to know what browsers support what syntax: some use the 2009 syntax, tweener syntax, 2012 syntax, modern syntax, or prefixed syntax.  
  4. Presenter James Williamson had a beautiful avatar during his presentation
  5. Define the flex container

    Includes what is called the "tweener" syntax for IE

    .flex {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
  6. Controlling main axis alignment

  7. flex-grow: accepts numbers, only positive. Represents how much the flex item will grow. Default is 1
    flex-shrink: represents how much flex item will shrink
    flex-basis: starting size of the element (if you omit it, the value will be zero)
  8. justify-content: space-between  -> evenly spaces elements along a line
    justify-content: space-around -> looks at space between elements, gives even padding away from edge of parent container
  9. Things to Remember

    1. Don't overuse it
    2. Let source order do the work
    3. Research flex-basis carefully
    4. Margins don't collapse, even vertically
  10. Resources for Flexbox

    Learn more about Flexbox from the W3C spec. Both Mozilla and Opera have great informational resources. And be sure to check out James' CSS Flexbox tutorial on Lynda.com (video).