移动端 三段式布局 （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; 　　}

}