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

约定不等于承诺〃 2024-02-19 15:48 18阅读 0赞

效果图  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
![微信小程序weui在线入门教程][weui]

> 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界面布局设计入门到精通][-WeUI]  
![微信小程序-WeUI界面布局设计入门到精通][-WeUI 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[weui]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/693cab028f5a4d3485cc36258d5c43af.png
[-WeUI]: https://ke.qq.com/course/348627?tuin=2b10d56
[-WeUI 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fba24b0d32e942ce8486dd9b8567a4ce.png