Flexbox: layout in CSS that doesn't suck

CSS is Awesome

Classic stab at the box model

Flexbox makes CSS Awesome again

• The name says it all it's really flexible ✓
• Crazy good layout abilities ✓
• Hard things now super easy ✓
• RWD without even trying ✓

• Flexbox in action

Before you get too excited

There are 3 implementations!

• Legacy circa 2009
• Tweener *shakes fist*
• New, CR won't change

So that last demo CSS

Looks more like this

.flex-container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
     -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
}

.flex-item {
  -webkit-flex: 1 0 200px;
     -moz-flex: 1 0 200px;
      -ms-flex: 1 0 200px;
          flex: 1 0 200px;
}

Oh you want tweener too?

.flex-container {
  display: -ms-flexbox;
  -ms-box-orient: horizontal;
}

Browser support

Pro tip

• Use Modernizr to know which version you're working with
• Prefixing should be handled by build tools or preprocessor
• Manually writing that will kill you, FACT.

Real world use cases

Vertical centering

Pricing table

Holy grail layout

You're not alone flexbox is hard to remember

• display: flex
• flex, flex-basis, flex-grow, flex-shrink
• justify-content, align-items, align-self
• WAT?

Pro tip #2

• Flexbox lends itself to small modules
• Ala OOCSS Media Object
• Still use floats, inline-block where it makes sense
• Don't force the use of flexbox cause it's shiny

Thanks!

• Further reading: bitly.com/bundles/ahrjay/9
• Slides: ryanseddon.github.io/flexbox-wds13
• @ryanseddon