flex布局实现上下固定中间滑动的布局方式

本文主要介绍了flex布局实现上下固定中间滑动的布局方式,分享给大家,具体如下: 例如这样的一个页面,希望有个头图,有个底部的底栏,中部内容区域可滑动。 简单介绍一下如何实现 固定头部和尾部,中间部分可滑动,使用flex布局 1.设置html,body高度为100% 2.设置最外层div的布局方式为弹性布局display:flex; 3.设置最外层div的主轴方向为flex-direction: column;主轴为垂直方向,起点在上沿 row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 colum