移動端 三段式佈局 （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;

　　}

}