Flexbox layout test

Quick play about with flexbox to test whether dashboard layout could work with it

by timdouglas

HTML

<div id="page_top"></div>
<div id="wrapper">
    <div class="side"></div>
    <div class="main">
        <div class="col left">
            <div class="graph"><canvas></canvas></div>
            <div class="col spacer_horizontal"></div>
            <div class="graph"><canvas></canvas></div>
        </div>
        <div class="col spacer_vertical"></div>
        <div class="col mid">
            <div class="graph console"><div></div></div>
            <div class="col spacer_horizontal"></div>
            <div class="graph"><canvas></canvas></div>
        </div>
        <div class="col spacer_vertical"></div>
        <div class="col right">
            <div class="graph"><canvas></canvas></div>
            <div class="col spacer_horizontal"></div>
            <div class="graph"><canvas></canvas></div>
        </div>
    </div>
    <div class="side"></div>
</div>
<div id="page_bottom"></div>

CSS

#wrapper
{
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  display: box;
  box-orient: horizontal;
}

#page_top, #page_bottom
{
    width: 100%;
    height: 30px;
    background-color: blue;
}

#page_top
{
    margin-bottom: 20px;
}

#page_bottom
{
    margin-top: 20px;
    height: 60px;
}

.side
{
    -webkit-box-flex: 1;
    min-width: 10px;
}

.main
{
    -webkit-box-flex: 5;
    
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: box;
    box-orient: horizontal;
}

.col
{
    -webkit-box-flex: 5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    display: box;
    box-orient: vertical;
}

.spacer_horizontal
{
     -webkit-box-flex: 1;
    width: 100%;
    min-height: 20px;
}

.spacer_vertical
{
    -webkit-box-flex: 1;
    min-width: 20px;
    height: 100%;
}

.graph
{
    -webkit-box-flex: 3;
    min-width: 100px;
    min-height: 100px;
    background-color: black;
}


.console
{
    -webkit-box-flex: 3;
}

.console div
{
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background-color: yellow;
}

.graph canvas
{
    background-color: red;
    width: 90%;
    height: 80px;
    min-width: 50px;
}