微信小程序Scroll-view无法flex布局？

总是在各类群和社区听到很多开发人员抱怨：微信小程序有踩不完的坑。我是从来都不相信会有什么坑是踩不完的。

这不……今天就遇到了一个。在使用 Scroll-view 的时候，想进行横向滚动（如下图的效果）

有些小伙伴会说：这不是很简单吗，用几个行内元素就实现了；也可以用块元素，设置 scroll-view 为 display:flex 就可以了。

没错。那我们先看下我这里 Scroll-view 的结构：

我们发现，scroll-view的子元素是块元素，默认的样式是下面这样的：

然后，我们给 Scroll-view 设置一个样式 display: flex，如下：

.tab-title {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-flow: row nowrap;
}

好奇怪，居然没反应！:(

打开微信小程序的官方文档，找到 Scroll-view 组件的文档，我们发现有如下说明：

原来是让我们设置 enable-flex=”true”，按照文档要求，我们给 Scroll-view 设置 enable-flex=”true”，再看看效果。

依旧是竖排的。懵了……

老规矩，“有不懂问百度！”

在百度里一翻查找，我发现了一个很奇妙的事情，就是基本能找到的解决方案都是教我们要给 scroll-view 增加 enable-flex=”true” 属性。

我严重怀疑这些博主都是“抄袭”的，根本没有经过实践！！！

还是靠自己吧！自己动手，丰衣足食。

我们知道给一个元素设置 display:flex 的样式之后，它的所有子元素自动成为容器成员，我们称为 Flex 项目（flex item）。

所以，为什么我们给 scroll-view 设置了 display:flex 之后，它的子元素没有变成flex item？

我怀疑，是不是scroll-view的子元素不是我们看到的子元素？试一下就知道了，我们给 tab-title__item 添加如下样式：

.tab-title > .tab-title__item {
    background-color: #F00;
    color: #FFF;
}

果然没效果，而当我们把样式改成下面这样， tab-title__item 变成红底白字，样式生效了。

.tab-title .tab-title__item {
    background-color: #F00;
    color: #FFF;
}

说明了一个问题，我们通过开发工具的调试器，看到的 scroll-view 的子元素，并不是真的 scroll-view 的子元素，有可能是孙元素或者……

看来用块元素设置 scroll-view 为 display:flex 是不行了，我们只能把这些 tab-title__item 元素变成 inline 样式了。

.tab-title .tab-title__item {
    display: inline-flex;
}

完美解决！经过实践，发现根本不需要给 scroll-view 设置 enable-flex=”true” 属性。