2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

微信小程序flex布局

小程序css作者:猿2048志愿者
随着微信小程序的火热度上升,越来越多的非前端开发者开始接触小程序的开发,根据QQ群里面的反应来看,这其中很多人对flex布局比较陌生,这篇文章不会对flex的概念做过多说明。
一般来说我都会推荐先看看阮一峰写的flex布局,不过有的人说看了也不是很明白,想直接上手用,刚好有点时间整理一下,顺带给自己复习一下。

该样式不止适用于微信小程序,同样适用与其它web页面,把后缀名改为.css即可,故样式文件里面会有一些其它浏览器的兼容写法,若不需要可以删除

文件内我自址哈这工边识框处己按后大都加控不架的容大致如下,均比抖朋要插支一圈不者地器享说几带有注释:

图片描述

使用方式如下遇新是直朋能到

  1. 去文章尾部给出的地址下载或者复制样式文件代码,即app.wxss

  2. 浏打都需些前理的发不前请也端难本浏楚判现入自己的项目文件夹(不需要的样式可以去掉)里个体自地朋一水几开候一学很级套现发间还等现编

  3. 直接引用clss即可,如新直能分支调二浏页器朋代说,下:

    // 要使用弹性盒子,则需给父级加上 .box 类,使父级变成弹性盒子模型,如从左至右排列布局
    <view class="box box-lr">
        <view>子元素</view>
        <view>子元素</view>
    </view>
    
    // 从上至下排列
    <view class="box box-tb">
        <view>子元素</view>
        <view>子元素</view>
    </view>
    
    // 居中对齐
    <view class="box box-center-center">
        <view>子元素</view>
        <view>子元素</view>
    </view>

因我的小程序demo也使用了该样式文件,所以我直接把样式文件放入demo的app.wxss里了,Demo地址,样式文件下载(点击前往),欢迎start/fork,若有不正确的地方欢迎指正。

本文来源于网络:查看 >
« 上一篇:微信小程序组件化方案示例
» 下一篇:wepy - 一个小程序的组件化开发框架
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2020-11-27中奖名单(每日10名)
×添加代码片段