flexbox demo

by Thomas Aylott

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;...

JavaScript

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>')
}