简述

一个页面，我们先做整理布局，将页面分成几个大块。假如这样：

整体分割

我们把页面分成三个部分，

• 上面是幻灯片，
• 中间是一些分类导航功能，
• 下面是新闻列表或商品详情等

整个页面布局

page{
  display: flex;
  flex-direction: column;
  height: 100%;
}

先控制整个页面布局

• page：表示整个页面
• display: flex; 表示整个页面采用flex方式
• flex-direction: column; 方向当然是竖着了

单独设置每一个

.swiper{
  flex: 3;
  background: #f3f6fe;
}
.sort{
  flex: 1;
  background: #f3d3e4;
}
.newsList{
  flex:4;
  background-color: #d3a433;
}

• flex:3 表示所占比例，这个回根据手机动态调整，占屏幕的 3/3+1+4，即八分之三
• 设置背景颜色以区分

总结

综上，就可以把整个页面分割出来了，再去填充每一部分就好了。