微信小手順のscroll-viewのflexレイアウト問題

WeChatアプレットのscroll-viewコンポーネントについて、初めて書く時はscroll-viewの中で直接に1層の容器を使って子元素を包んで、それからflexレイアウトを使って、しかもコンポーネントを使って実現した横スクロールで、後は改善を提出しています.
1.効果図
2.scroll-viewリガの1階の容器で、flexレイアウトを使って実現します.
ここでflexレイアウトで実現すれば、コンポーネントの形を使います.

wxssファイル

.scrollView{
  padding: 0 20rpx;
  white-space: nowrap;
  box-sizing: border-box;
}
.item{
  display: inline-block;
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}

.scrollView1{
  display: flex;
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.item1{
  margin-right: 20rpx;
  width: calc(100% / 3);
  height: 100rpx;
  background: #ff00ff;
}
.scrollView2{
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.itemContainer{
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.scrollItem{
  margin-right: 20rpx;
}

.scrollView3{
  margin-top: 40rpx;
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}
.item3{
  margin-right: 20rpx;
  /* width: calc(100% / 3); */
  width: 240rpx;
  height: 100rpx;
  background: #aa22dd;
}

wxmlファイル

サブコンポーネントの中に一つのviewタグがあります.直接

を書くことができます.
3.直接displayを使う:inline-block

wxmlファイル

4.自分の理解

scroll-viewは直接flexレイアウトを使ってはいけません.flexレイアウトを使うと、彼は予想通りに横に並んで、

をスクロールしません.

flexレイアウトを使うにはちょっとお願いします.

flexレイアウトをそのまま使うと、サブアセンブリを使わないと、

の列に押し込まれます.
一生懸命勉強しています.勉強に役立つなら、印をつけてください.

以前の好文おすすめ:

は、iOSとAndroidおよびPC端末

を判断する.

純粋なcssは滝の流れを実現します.

単一行及び多行文字の超過を実現し、省略番号を追加する

.

マイクロクレジットの買い物車と親子部品の値段及びcall cの注意事項