uniapp/小程序 scroll-view 中设置flex布局无效问题

问题

使用 scroll-view 设置横向滑动时在 scroll-view 元素上设置flex布局，没有生效

<scroll-view scroll-x class='recommend-content'>
  <view> 点赞 </view>
  <view> 收藏 </view>
  <view> 关注 </view>
</scroll-view>
			
<style>
  .recommend-content{
    display: flex; /* flex布局无效 */
  }
</style>

解决方法

在 scroll-view 下再加一层 view 包着 scroll-view 的内部元素，并在新增的这层 view 中设置 flex 布局：

<scroll-view scroll-x class='recommend-content'>
  <view class='recommend-content-all'>
    <view> 点赞 </view>
    <view> 收藏 </view>
    <view> 关注 </view>
  </view>
</scroll-view>
			
<style>
  .recommend-content-all{
    display: flex;
  }
</style>

效果

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者