Use flex to implement the Holy Grail layout
日常开发环境中C3带给我们的方便之处越来越多，今天就简单的写一个使用flex实现其圣杯布局的方式
.wrapper{
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
flex-direction: column;
}
.head ,.footer,.left,.right{
flex: 0 0 20%;
border: 1px solid green;
}
.contain{
flex: 1 1 auto;
display: flex;
}
.content{
flex: 1 1 auto;
}
<body>
<div class="wrapper">
<div class="head"></div>
<div class="contain">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>