Flexbox base 0.1

Better understanding of flexbox

by karlgo

HTML

<div class="header">Midwest Weather Brief</div>
<div class="body">
    <div class="thumbsPanel">
        <div class="thumb1">Thumb1</div>
        <div class="thumb2">Thumb2</div>
        <div class="thumb3">Thumb3</div>
        <div class="thumb4">Thumb4</div>
    </div>
    <!-- thumbsPanel -->
    <div class="mainPanel">Main Graphics Panel</div>
</div>

CSS

div {
    border: 3px solid black;
}
.header {
    border: 3px solid black;
    width: 100%;
}
.body {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    border: 3px solid orange;
    width: 100%;
}
.thumbsPanel {
    border: 2px solid green;
    width: 100px;
    height: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.thumb1 {
    border: 2px solid aqua;
}
.thumb2 {
    border: 2px solid chartreuse;
}
.thumb3 {
    border: 2px solid darkorchid;
}
.thumb4 {
    border: 2px solid darkorange;
}
.mainPanel {
    -webkit-box-flex:1.0;
    border: 2px solid darkred;
}