横向滚动的flex布局最右侧margin-right 失效

smile1213 - 2021-09-30 20:24:20

写一个横向滚动的flex布局

<view >
  <view ></view>
  <view ></view>
  <view ></view>
  <view ></view>
</view>

/* 小程序示例，忽略单位 rpx  */
.top-wrap {
  width: 100%;
  display: flex;
  overflow-x: scroll;
}
.top-area-item {
  width: 236rpx;
  height: 236rpx;
  margin: 0 24rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
  background-color: pink;
}

上述代码执行后，发现最左侧 top-area-item 的 margin-left 有效，但最右侧的 margin-right 无效：

在这里插入图片描述

解决办法，中间再套一层div，并设置 display: flex; overflow:visible

<view >
   <view >
     <view ></view>
     <view ></view>
     <view ></view>
     <view ></view>
   </view>
 </view>

.top-wrap {
  width: 100%;
  display: flex;
  overflow-x: scroll;
}
.top-middle {
  display: flex;
  overflow: visible;
}
.top-area-item {
  width: 236rpx;
  height: 236rpx;
  margin: 0 24rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
  background-color: pink;
}

在这里插入图片描述