使用Flex做一个手机常见的页面

打开手机淘宝，会看到它垂直方向上的页面分成3部分，上面的搜索框、中间的内容区和下面的tab按钮

下面我将要用 flex 布局实现这个页面的框架

手机端的盒模型一般都是 booder-box，所以，这里给它一个初始化

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}

html 的部分是这样的

<div class="container">
  <header>header</header>
  <main><p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p>
  <p>main</p></main>
  <footer>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </footer>
  
</div>

使用的 css 代码如下

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
}
li{
  list-style:none;
}
.container{
  background-color: #f99;
  height:100vh;
  display:flex;
  flex-direction: column;
}
header{
  height:100px;
  background-color: #eee;
}
main{
  flex-grow:1;
  overflow:auto;
}
footer{
  height:100px;
  background-color: #eee;
}
footer>ul{
  display: flex;
  height:100px;
}
footer>ul>li{
  width:25%;
  border: 1px solid black;
}

这里主要起作用的是 flex-grow:1;，这行代码会让剩余的空间分成1份，main 区域的部分独占这一份空间