Flexbox Vertical Center Div / Image

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">
        <div class="imagePanel">ImagePanel</div>
        <img height=100px width=100px/>
        <!-- <div class="legendPanel">LegendPanel</div> -->
    </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;
    width: 100px;
    height: 100px;
}
.thumb2 {
    border: 2px solid chartreuse;
    width: 100px;
    height: 100px;    
}
.thumb3 {
    border: 2px solid darkorchid;
}
.thumb4 {
    border: 2px solid darkorange;
}
.mainPanel {
    -webkit-box-flex:1.0;
    border: 4px solid darkred;
}
.mainPanel:before {
    height: 100%;
}

.imagePanel {
    border: 2px solid blue;
}

.legendPanel {
    border: 2px solid crimson;
    
}