关于css:横向滚动的flex布局-最右侧marginright-失效

8次阅读

共计 875 个字符，预计需要花费 3 分钟才能阅读完成。

<view class="top-wrap">
  <view class="top-area-item"></view>
  <view class="top-area-item"></view>
  <view class="top-area-item"></view>
  <view class="top-area-item"></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 class="top-wrap">
   <view class="top-middle">
     <view class="top-area-item"></view>
     <view class="top-area-item"></view>
     <view class="top-area-item"></view>
     <view class="top-area-item"></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;
}

正文完