flexbox demo (source: https://jsfiddle.net/SubtleGradient/XdeeD/)

fiddle.css

html,body{font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}

*{margin:0;padding:0;}
body{padding:2ex;}
hr{margin:2ex 0;}

html,body,input,td,th{font-size:100%;}

div{border:4px solid #AEFFE6;background:#66FFCC;}
p  {border:2px solid #66FFCC;background:#ffc;color:#cc0;}
div,p{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
div{-webkit-box-shadow:inset 0 0 100px 25px #AEFFE6;}
/*p{padding:1ex; font-family:Georgia;}*/

.box p.wide{padding:1ex .5ex;}
.box p.small{font-size:60%; padding:1ex;}
.box p.tall{line-height:.8;padding:.5ex 1ex;}
th{font-size:50%;letter-spacing:.5ex; font-weight:normal;}
table{margin:1ex 0;}

table,
.box{width:25ex; margin-left:auto; margin-right:auto;margin-bottom:1ex;}
.orient-vertical{height:32ex;}
em{display:block;font-size:.5ex;}

.box{display:-webkit-box;display:-moz-box;display:box;}
.orient-vertical{-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical;}
.orient-horizontal{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;box-orient:horizontal;}

.direction-normal{-webkit-box-direction:normal;-moz-box-direction:normal;box-direction:normal;}
.direction-reverse{-webkit-box-direction:reverse;-moz-box-direction:reverse;box-direction:reverse;}

.align-start{-webkit-box-align:start;-moz-box-align:start;box-align:start;}
.align-end{-webkit-box-align:end;-moz-box-align:end;box-align:end;}
.align-center{-webkit-box-align:center;-moz-box-align:center;box-align:center;}
.align-stretch{-webkit-box-align:stretch;-moz-box-align:stretch;box-align:stretch;}
.align-baseline{-webkit-box-align:baseline;-moz-box-align:baseline;box-align:baseline;}

.pack-start{-webkit-box-pack:start;-moz-box-pack:start;box-pack:start;}
.pack-end{-webkit-box-pack:end;-moz-box-pack:end;box-pack:end;}
.pack-center{-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;}
.pack-justify{-webkit-box-pack:justify;-moz-box-pack:justify;box-pack:justify;}

p,
.group-1{-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;box-ordinal-group:1;}
.group-2{-webkit-box-ordinal-group:2;-moz-box-ordinal-group:2;box-ordinal-group:2;}
.group-3{-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;box-ordinal-group:3;}

p,
.flex-0{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;}
.flex-1{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;}
.flex-2{-webkit-box-flex:2;-moz-box-flex:2;box-flex:2;}
.flex-3{-webkit-box-flex:3;-moz-box-flex:3;box-flex:3;}

fiddle.js

var meta = document.createElement('meta');
meta.name="viewport";
meta.content="width=250";
document.head.appendChild(meta);

var orient = 'horizontal vertical'.split(' ')
var align = 'baseline start center end stretch'.split(' ')
var pack = 'start center end justify'.split(' ')
var className;

orient: for (var orientIndex = -1, orientLn = orient.length; ++orientIndex < orientLn;)
pack: for (var packIndex = -1, packLn = pack.length; ++packIndex < packLn;)
align: for (var alignIndex = -1, alignLn = align.length; ++alignIndex < alignLn;)
{
    printBox(orient[orientIndex], pack[packIndex], align[alignIndex]);
}

function printBox(orient, pack, align){
    if (align == 'baseline' && orient == 'vertical') return;
    document.write('<table width="100%"><tr align=center><th width="33%">orient<th width="33%">pack<th>align<tr align=center>'
        + '<td>' + orient
        + '<td>' + pack
        + '<td>' + align
        + '</table>')
    document.write('<div class="box orient-' + orient + ' pack-' + pack + ' align-' + align + '">\
        <p class="item wide"><em>' + 'orient</em> ' + orient + '\
        <p class="item small"><em>' + 'pack</em> ' + pack + '\
        <p class="item tall"><em>' + ('align ' + align).split('').join('<br>').replace(' <br>','</em><br>') + '\
    </div>')
}