小程序-布局自动填充

小程序开发页面有多个内容，其中滚动区域自动填充布局

 

<view class="flex container" style="padding: 0 !important">
  <view class="flex-auto">
    111
  </view>

  <view class="flex-auto">
    222
  </view>

  <view class="flex-auto">
    333
  </view>

  <view style="flex: 1 1 auto;" class="ps-rl">
   　　

　　　<view>444</view>
　　　<view>444</view>
　　　<view>444</view>
　　　<view>444</view>
　　　<view>444</view>
　　　<view>444</view>
　　　<view>444</view>
　　　<view>444</view>
　　　<view>444</view>

　</view> 

</view>

page{
  height: 100%;
}


.flex-auto {
  flex: 0 0 auto;
}

 

自动排列盒子，并且有一定间距的排列方式。也就是宽度达到平均展示的功能。

.parent{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20rpx;
}