flex布局（1）

一、圣杯布局（网站中最常见的页面布局：主要有三个部分，分别是头部、主体部分、尾部，其中主体部分又分为三部分，下边我们用flex布局方式写一下：）
<div class="main">
<header>header</header>
<div class="content">
<div class="nav">nav</div>
<div class="cont">cont</div>
<div class="new">new</div>
</div>
<footer>footer<／footer>
</div>

css代码如下：
.main{
display:flex;
min-height:100Vh;
flex-direction:column;
border：1px #f00 solid;
}
.header,footer{
flex：1；
border：1 px #f0f solid;
}
.content{
flex：1；
display：flex;
}
.nav,.new{
background:#ccc;
flex: 0 0 120px;
}
.cont{
flex:1;
}