布局基础
默认每个View进行垂直布局。每个view占据一行。 flex布局(设置display=flex)
平面布局有一个主轴和交叉轴(类似于平面坐标中的X轴和 Y轴) 默认X轴为主轴 Y轴为交叉轴
flex容器属性:针对于容器内的容器 flex-direction排列方向 row(默认) column
flex-wrap元素换行问题 nowrap(不换行) wrap(换行) wrap-reverse换行反转(多的一行在上面) flex-flow上面两个的简写 先定义方向 再定义换行
justify-content主轴的对齐元素 center(沿主轴居中对齐) flex-start(主轴左边、默认方式) flex-end(主轴右边) space-around(各个元素平分主轴空间) space-between元素两端对齐 中间间隔相同
align-items交叉轴的对齐方式 flex-start flex-end center stretch(在元素没有设置高度时,占满整个容器的高度) baseline以元素中的文字的底线进行对齐
flex元素属性 针对于容器内的元素 flex-grow有多余空间时,元素的放大比例 设置多个元素之间的比例,按照比例瓜分剩余空间
flex-shrink空间不足时,元素的缩小比例 默认为1,表示空间不足时,所有元素等比缩小 某元素设置为0时,表示不缩小 值越大,缩小比例越大。
flex-basis元素在主轴上占据的空间 rpx可能会不生效
flex是上面三者的简称 放大 缩小 空间 order元素排列顺序 根据元素个数,数越小越靠前
align-self元素自身的定义方式 利于定义某些特殊元素的布局
相对定位 相对于自身进行定位,参照物是自己 绝对定位 是相对于离它最近的已经定位的父级元素进行定位的。 如果所有父级都没有定位,则相对于整个窗口定位。 |
【基础】微信小程序flex布局
发布:2018-04-23 11:22浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08