实现的效果

QQ20170808-154407

页面代码:

<div class="container">
  <div class="headerTitle">Title</div>
  <div class="content">&nbsp;</div>
  <div class="tabLayout">
    <div class="tabItem">
      HOME
    </div>
    <div class="tabItem">
      ITEM
    </div>
    <div class="tabItem">
      MY
    </div>
  </div>
</div>

样式代码:

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.headerTitle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
}

.tabLayout {
  display: flex;
  height: 50px;
  align-items: center;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid #eee;
}

注意:container样式里必须要写上min-height: 100vh;,否则中间部分不会填充

原文链接: https://tomoya92.github.io/2017/08/08/flex-css/