效果圖

wxml程式碼

<view class="page">
  <view class="page__hd">

    <view class="page__title">Flex</view>

    <view class="page__desc">Flex佈局</view>

  </view>

  <view class="page__bd page__bd_spacing">

    <view class="weui-flex">

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

    </view>

    <view class="weui-flex">

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

    </view>

    <view class="weui-flex">

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

    </view>

    <view class="weui-flex">

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

    </view>

    <view class="weui-flex">

      <view>

        <view class="placeholder">weui</view>

      </view>

      <view class="weui-flex__item">

        <view class="placeholder">weui</view>

      </view>

      <view>

        <view class="placeholder">weui</view>

      </view>

    </view>

  </view>

</view>
 

歡迎大家學習我的視訊教程：微信小程式-WeUI介面佈局設計入門到精通