移动端 三段式布局 （flex方式）
Posted jshe
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端 三段式布局 （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;
}
}
以上是关于移动端 三段式布局 （flex方式）的主要内容，如果未能解决你的问题，请参考以下文章