移动端 三段式布局 （flex方式）

分享一种平时用的三段式布局(flex)

主要思路是  上中下    header&footer 给高度  main 占其余部分

html 部分

<div class='wrap'>

　　<div class='header'></div>

　　<div class='main'></div>

　　<div class='footer'></div>

</div>

 

css 部分

.wrap{

　　display: flex;  //弹性盒子

　　flex-direction: column;  //垂直排列

　　height: 100%;    //容器盒子要有高度

　　.header{

　　　　height: .48rem;

　　}

　　.main{

　　　　flex: 1;　　　　//占剩余的部分

　　}

　　.footer{

　　　　height: .48rem;

　　}

}