Flexbox: layout in CSS that doesn't suck

CSS is Awesome

Classic stab at the box model

Flexbox makes CSS Awesome again

Before you get too excited

There are 3 implementations!

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

Flexbox support information

Pro tip

Real world use cases

Vertical centering

Pricing table

Holy grail layout

You're not alone flexbox is hard to remember

Pro tip #2