使用flex 布局 的盒子 使用 swiper轮播插件 flex布局会失效的解决方法

如上图代码所示：本来reward-list是一个弹性布局容器，子元素reward是弹性布局的。但嵌入swiper之后，reward的直接子元素就不再是reward。

。

我们看下实际上的html结构：

可以看到从rewad-list到reward中间多了三层。

解决方法：

将reward-swiper的width设置为100%。

然后将reward的margin设置为auto即可。