微信小程序中菜单栏动态两行排法

##CSS中菜单栏动态两行排法
一、话不多说，上代码
1、wxml

<scroll-view  class="out" scroll-x="true" scroll-with-animation="{{true}}">
  <view class="flex" hover-class="none" hover-stop-propagation="false">
    <view>1</view>
    <view>2</view>
    <view>3</view>
    <view>4</view>
    <view>5</view>
    <view>6</view>
    <view>7</view>
    <view>8</view>
    <view>9</view>
    <view>10</view>
    <view>11</view>
    <view>12</view>
  </view>
</scroll-view>

2、wxss

.out{
  width: 100vw;
  height: 50vw;
  background: pink;
  overflow:hidden;
 
}
.flex{
  box-sizing: border-box;
  height: 50vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex view{
  width: 20vw;
  height: 25vw;
  background: blue;
  
}

样式（可以滑动的）