微信小程序weui在线入门教程-WeUi基础组件-flex布局

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86413719

效果图

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界面布局设计入门到精通