您的位置：首页 > 产品设计 > UI/UE

[微信小程序]入门学习知识点_UI布局

2017-06-23 10:43 423 查看

[微信小程序]入门学习知识点_UI布局

@Author GQ 2017年06月22日

一开始刚出小程序的时候还比较关注,由于资料和ide不太完善就没看,
现在准备开始学习入门.

小程序入门学习笔记...


工具

微信web开发者工具(当前版本
0.18.182100
)

Flex布局

设置
display : flex


flex-flow


row
(默认行显示)/
column
(列显示)

nowarp
(默认不自动换行)/
warp
(自动换行)/
reverse
(反转,在换行时有效)

简写示例: 
flex-flow : row warp




nowarp



warp

justify-content


flex-start
(默认左对齐)/
flex-end
(右对齐)/
center
(居中挨着)/
space-around
(居中分散)/
space-between
(两端对齐)



space-around



space-between

align-items
align-self
(设置自己的位置)

flex-start
(默认左对齐)/
flex-end
(右对齐)/
center
(居中)/
baseline
(内容在统一水平线上)/
stretch
(拉伸,需要在item不设置高度时有效)

​



flex-start



flex-end



flex-baseline

flex-grow
有剩余空间时所占比重,默认0

flex-shirnk
无剩余空间时缩放比重,默认1

flex-basis
指定某一元素的大小

简写示例: 
flex : 0 1 150rpx;


order
排列顺序使用

position


relative
(相对定位)/
absolute
(绝对定位)



relative



absolute
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  flex 微信 小程序 ui 布局
相关文章推荐
新的分享
章节导航