小程序 scroll-view组件使用scroll-x + flex布局 子元素无法横向显示问题

问题表现

在学习小程序的view和scroll-view组件时，给view和scroll-view设置相同的样式，只有view内的子元素可以横向展示，scroll-view内的子元素始终是纵向的

<!-- view组件 -->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

<!-- scroll-view组件 -->
<scroll-view class="container1 scroll-container-x" scroll-x>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.container1{
  display: flex;
  justify-content: space-around;
}
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightpink;
}
.container1 view:nth-child(3){
  background-color: lightsalmon;
}

问题原因 

scroll-view组件中flex布局不生效

问题解决

解决办法一：通过设置属性让flex布局生效

在scroll-view上添加enable-flex属性

<scroll-view class="container1 scroll-container-x" scroll-x enable-flex>

后续设置scroll-view的width实现scroll-x效果时，还会遇到一个问题：当设置的scroll-view宽度小于子元素宽度之和，子元素还是会纵向显示，这个问题在下面的方法中有说到，直接跳到➡处

解决办法二：硬改呗 当作没用flex布局来改

1.子元素纵向展示是因为view是块元素，自占一行，故view设置display:inline-block。可以横向展示

2.为了实现scroll-x效果，设置scroll-view设置width:100px。又变成纵向的了

3.因为宽度不够默认会换行哇 给scroll-view加white-space:nowrap 

<!-- view组件 -->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

<!-- scroll-view组件 -->
<scroll-view class="container1 scroll-container-x" scroll-x>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

.container1{
  display: flex;
  justify-content: space-around;
}
.container1 view{
  width: 100px;
  height: 100px;
  display: inline-block;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightblue;
}
.container1 view:nth-child(2){
  background-color: lightpink;
}
.container1 view:nth-child(3){
  background-color: lightsalmon;
}
.scroll-container-x{
  width: 120px;
  white-space: nowrap;
}