随着微信小程序的火热度上升,越来越多的非前端开发者开始接触小程序的开发,根据QQ群里面的反应来看,这其中很多人对flex
布局比较陌生,这篇文章不会对flex
的概念做过多说明。
一般来说我都会推荐先看看阮一峰写的flex布局,不过有的人说看了也不是很明白,想直接上手用,刚好有点时间整理一下,顺带给自己复习一下。
该样式不止适用于微信小程序,同样适用与其它web页面,把后缀名改为.css
即可,故样式文件里面会有一些其它浏览器的兼容写法,若不需要可以删除
文件内容大致如下,均带有注释:
使用方式如下:
去文章尾部给出的地址下载或者复制样式文件代码,即
app.wxss
;加入自己的项目文件夹(不需要的样式可以去掉);
直接引用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>