文中关键详细介绍了flex合理布局完成左右固定不动正中间拖动的合理布局方法，共享给大伙儿，实际以下:
比如那样的一个网页页面，期待有一个头图，有一个底端的底栏，中间內容地区可拖动。
简易详细介绍一下怎样完成
固定不动头顶部和尾部，正中间一部分可拖动，应用flex合理布局
1.设定html，body高宽比为100%
2.设定最表层div的合理布局方法为延展性合理布局display:flex;
3.设定最表层div的主轴方位为flex-direction: column;主轴为竖直方位，起始点在上沿
row（默认设置值）：主轴为水准方位，起始点在左方。
row-reverse：主轴为水准方位，起始点在右端。
column：主轴为竖直方位，起始点在上沿。
column-reverse：主轴为竖直方位，起始点在下沿。
4.设定最表层div的高宽比为100%
5.一切正常写头顶部款式
6.一切正常写尾部款式
7.正中间款式为flex: 1;overflow: hidden或是overflow:auto;-webkit-overflow-scrolling: touch后面一种在ios手机上中拖动会出现难题，提议应用软件
html一部分：
<div class="main-warp">
<div class="header">
<img src="imgurl" class="header-img" alt>
</div>
<div class="content">
<div class="content-scroll">
<div class="shop-box">
<img src="imgurl" alt>
</div>
<div class="shop-box">
<img src="imgurl" alt >
</div>
<div class="shop-box">
<img src="imgurl" alt >
</div>
<div class="shop-box">
<img src="imgurl" alt >
</div>
</div>
</div>
<div class="footer"></div>
</div>
js一部分:
<script>
import BScroll from 'better-scroll'
export default {
data () {
return {
}
},
components: {
},
methods: {
},
computed: {
},
mounted () {
this.$nextTick(function () {
/* eslint-disable no-new */
let pageBottom = document.querySelector('.content')
new BScroll(pageBottom, { click: true })
})
},
created () {
}
}
</script>
款式一部分：
<style lang="less" rel="stylesheet/less" type="text/less">
@r: 100;
// 固定不动头顶部和尾部，正中间一部分可拖动，应用flex合理布局
// html,
body {
background: url("//storage.jd.com/1901/04nianhuojie/02lingquanbg_02.png")
repeat-y;
background-size: 100%;
height: 100%;
}
.main-warp {
max-width: 750px;
min-height: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
box-sizing: border-box;
.header {
height: 500rem / @r;
.header-img {
height: 500rem / @r;
}
}
.content {
flex: 1;
width: 100%;
overflow: hidden;
// overflow: auto;
// -webkit-overflow-scrolling: touch;
.shop-box {
margin: 50rem / @r 0;
img {
width: 106rem / @r;
}
}
}
.footer {
background: url("//storage.jd.com/1901/04nianhuojie/fixbtnbg_02.png") repeat;
background-size: 12rem / @r 11rem / @r;
height: 82rem / @r;
width: 100%;
bottom: 0;
color: #ffdeb8;
font-size: 34rem / @r;
line-height: 82rem / @r;
text-align: center;
font-weight: bolder;
max-width: 750px;
}
}
</style>
表明一下，在手机端，假如立即应用
overflow: auto;
-webkit-overflow-scrolling: touch;
得话 ，在ios上，假如手指头拖动超过了小盒子的地区，那麼非常容易再度拖动的情况下，造成地区不可以拖动的难题，那般子就行好像手指头沒有点到哪个小盒子一样，因此这儿应用了BScroll软件，应用IScroll也是一样的。
他的最后实际效果便是把content的立即子原素加了transition实际效果。
在此纪录该合理布局方法
注：留意 这类合理布局方法在ios9.3以及下列版本号兼容问题，flex合理布局在必须适配低版本号ios时還是必须慎用的哦
到此这篇有关flex合理布局完成左右固定不动正中间拖动的合理布局方法的文章内容就详细介绍到这了,大量有关flex左右固定不动正中间拖动合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！