介绍 & lt; div 类=癿ain-warp"比;
,,,& lt; div 类=癶eader"比;
,,,,,& lt; img src=https://www.yisu.com/zixun/癷mgurl”class=" header-img " alt>
小编给大家分享一下flex布局如何实现上下固定中间滑动,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
例如这样的一个页面,希望有个头图,有个底部的底栏,中部内容区域可滑动。
简单介绍一下如何实现
固定头部和尾部,中间部分可滑动,使用flex布局
1。设置html,身体高度为100%
2。设置最外层div的布局方式为弹性布局显示:flex;
3。设置最外层div的主轴方向为flex-direction:列;主轴为垂直方向,起点在上沿
行(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
专栏:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
4。设置最外层div的高度为100%
5。正常写头部样式
6。正常写尾部样式
7。flex中间样式为:1;溢出:隐藏或者溢出:汽车;-webkit-overflow-scrolling:触摸后者在ios手机中滑动会有问题,建议使用插件
html部分:
