当前位置: 首页 > Web前端 > HTML5

水平滚动flex布局,最右边的margin-right失效

时间:2023-04-05 13:18:56 HTML5

写一个水平滚动的弹性布局/*小程序示例,忽略单位rpx*/.top-wrap{width:100%;显示:弹性;overflow-x:scroll;}.top-area-item{宽度:236rpx;高度:236rpx;保证金:024rpx;边界半径:12rpx;-color:pink;}上面代码执行后,发现最左边的top-area-item的margin-left有效,但是最右边的margin-right无效:解决方法是放一个div在中间并设置显示:flex;溢出:可见.top-wrap{宽度:100%;显示:弹性;overflow-x:滚动;}.top-middle{显示:弹性;溢出:可见;}.top-area-item{宽度:236rpx;高度:236rpx;保证金:024rpx;边界半径:12rpx;伸缩收缩:0;背景色:粉色;}