Design a 3-columns layout using flex - html

Question

I have to design a 3 columns layout with these conditions:
I don't want to use percentages
I don't care if left or right columns are made with pixels
center column has to take the remaining width
elements have to be aligned vertically
I need the spans to be 100% height of their parent, to make the hover work with a full background-color
I tried using display:flex on the main container, it works well but I can't align the elements vertically. I tried using display-table: cell and vertical-align: middle but it doesn't seem to work with flex.
I developed a jsfiddle to show you what I tried: http://jsfiddle.net/v13yy2v3/4/
html, body {
height:100%;
}
#mainPercent {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPercent {
background-color: green;
float: left;
width: 5%;
height:100%;
}
#centerPercent {
background-color: blue;
text-align: center;
float: left;
width: 90%;
/* percent isn't wanted */
height:100%;
display:table;
}
#centerPercent span {
display:table-cell;
vertical-align : middle;
}
#rightPercent {
background-color: purple;
float: right;
height:100%;
width: 5%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display:flex;
/* align-items: center;
justify-content: center; items are not 100% height */
}
#leftFlex {
background-color: green;
}
#centerFlex {
background-color: blue;
text-align: center;
flex:1;
/*display:table;*/
}
#rightFlex {
background-color: purple;
}
#mainPx {
background-color: red;
width: 100%;
height: 20%;
color: white;
}
#leftPx {
width:128px;
float:left;
background-color: green;
}
#centerPx {
background-color: blue;
text-align: center;
width:100%;
}
#rightPx {
float:right;
width : 128px;
background-color: purple;
}
<br/>
<div id="mainPercent">
<div id="leftPercent"><span>left</span>
</div>
<div id="centerPercent"><span>center</span>
</div>
<div id="rightPercent"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainFlex">
<div id="leftFlex"><span>left</span>
</div>
<div id="centerFlex"><span>center</span>
</div>
<div id="rightFlex"><span>right</span>
</div>
</div>
<br/>
<br/>
<div id="mainPx">
<div id="leftPx"><span>left</span>
</div>
<div id="centerPx"><span>center</span>
</div>
<div id="rightPx"><span>right</span>
</div>
</div>

Answer 1

You'd have to keep extending the flexbox to the child items and the spans.
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#mainFlex {
background-color: red;
width: 100%;
height: 20%;
color: white;
display: flex;
justify-content: center;
}
.left {
background-color: green;
}
.center {
background-color: blue;
text-align: center;
flex: 1;
}
.right {
background-color: purple;
}
.child {
display: flex;
flex-direction: column;
}
span {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0.25em;
flex: 1;
}
span:hover {
background: #bada55;
}
<div id="mainFlex">
<div class=" left child"><span>left</span>
</div>
<div class="center child"><span>center</span>
</div>
<div class="right child"><span>right</span>
</div>
</div>