微信小程序 wxml中的属性记录
2017-03-15 16:03
190 查看
1. view 标签中的属性
style 中的参数
margin-top:10px; (向上距离)
display : flex; (display : flex 容器声明)
flex-direction: (view中布局的方向)
row; (横向布局 ,从左到右)
column; (垂直布局,布局从上往下)
row-reverse; (横向布局 ,从右到左)
column-reverse;(垂直布局,布局从下到上)
flex-wrap: (当布局一行里面的数据无法全部显示的时候,如何换行)
nowrap; (默认,不换行)
wrap; (换行,第一行在上面)
wrap-reverse; (换行,第一行在下面)
flex-flow: (是flex-direction和flex-wrap的简写,默认值是,row, nowrap)
例子:flex-flow:row||nowrap;
justify-content: (父布局对其中的子布局的对齐方式)
flex-start;(左对齐)
flex-end;(右对齐)
center;(居中)
space-between;( 两端对齐,子控件之间的间隔等分)
space-around; (两侧,和子控件之间都有间隔,子控件的间隔是两个间隔的两倍)
align-items: (属性在交叉轴上如何对齐)
flex-start;(交叉轴的起点对齐)
flex-end;(交叉轴的终点对齐)
center;(交叉轴的中点对齐)
baseline;(项目第一行文字的基线对齐)
stretch;(如果项目未设置高度或是设置为auto,将占满整个容器的高度)
align-content:(子类里面有多行布局时的对齐方式,只有一个布局时,该属性不起作用)
flex-start;(交叉轴的起点对齐)
flex-end;(交叉轴的终点对齐)
center;(交叉轴的中点对齐)
space-between;( 两端对齐,子控件之间的间隔等分)
space-around; (两侧,和子控件之间都有间隔,子控件的间隔是两个间隔的两倍
stretch;(如果项目未设置高度或是设置为auto,将占满整个容器的高度)
子布局中的属性
order:(定义排序的顺序,数值越小排列约靠前,默认为0)
flex-grow: (定义放大比例,就是剩下的空间,占的大小,相当于Android中的weight)
flex-shrink:(定义缩小比例,当空间不够的时候,对项目进行缩小,和上面放大原理相同)
align-self:(用来允许自己的布局和其他的子布局方式不同)
flex-start;(交叉轴的起点对齐)
flex-end;(交叉轴的终点对齐)
center;(交叉轴的中点对齐)
baseline;(项目第一行文字的基线对齐)
stretch;(如果项目未设置高度或是设置为auto,将占满整个容器的高度)
边距
margin:
margin: 20rpx 10rpx 25rpx 10rpx; (如果提供了四个参数,将用在上,右,下,左的顺序上)
margin: 20rpx; (如果只提供一个,就是作用在四个方向上)
margin: 20rpx 10rpx; (提供两个,一个用于上下,一个用于左右)
margin: 20rpx 10rpx 20rpx; (如果提供三个,第一个用于上,第二个用于左右,第三个用于下)
如果两个相邻的都有margin,就会出现合并的现象,合并后取其中大的值
margin-top,margin-right,margin-bottom,margin-left,分别对应上右下左的边距距离,可取值:auto/数值/百分比
padding: 同上(margin)
padding-top,padding-right,padding-bottom,padding-left,分别对应上右下左的内边距距离,可取值:auto/数值/百分比
style 中的参数
margin-top:10px; (向上距离)
display : flex; (display : flex 容器声明)
flex-direction: (view中布局的方向)
row; (横向布局 ,从左到右)
column; (垂直布局,布局从上往下)
row-reverse; (横向布局 ,从右到左)
column-reverse;(垂直布局,布局从下到上)
flex-wrap: (当布局一行里面的数据无法全部显示的时候,如何换行)
nowrap; (默认,不换行)
wrap; (换行,第一行在上面)
wrap-reverse; (换行,第一行在下面)
flex-flow: (是flex-direction和flex-wrap的简写,默认值是,row, nowrap)
例子:flex-flow:row||nowrap;
justify-content: (父布局对其中的子布局的对齐方式)
flex-start;(左对齐)
flex-end;(右对齐)
center;(居中)
space-between;( 两端对齐,子控件之间的间隔等分)
space-around; (两侧,和子控件之间都有间隔,子控件的间隔是两个间隔的两倍)
align-items: (属性在交叉轴上如何对齐)
flex-start;(交叉轴的起点对齐)
flex-end;(交叉轴的终点对齐)
center;(交叉轴的中点对齐)
baseline;(项目第一行文字的基线对齐)
stretch;(如果项目未设置高度或是设置为auto,将占满整个容器的高度)
align-content:(子类里面有多行布局时的对齐方式,只有一个布局时,该属性不起作用)
flex-start;(交叉轴的起点对齐)
flex-end;(交叉轴的终点对齐)
center;(交叉轴的中点对齐)
space-between;( 两端对齐,子控件之间的间隔等分)
space-around; (两侧,和子控件之间都有间隔,子控件的间隔是两个间隔的两倍
stretch;(如果项目未设置高度或是设置为auto,将占满整个容器的高度)
子布局中的属性
order:(定义排序的顺序,数值越小排列约靠前,默认为0)
flex-grow: (定义放大比例,就是剩下的空间,占的大小,相当于Android中的weight)
flex-shrink:(定义缩小比例,当空间不够的时候,对项目进行缩小,和上面放大原理相同)
align-self:(用来允许自己的布局和其他的子布局方式不同)
flex-start;(交叉轴的起点对齐)
flex-end;(交叉轴的终点对齐)
center;(交叉轴的中点对齐)
baseline;(项目第一行文字的基线对齐)
stretch;(如果项目未设置高度或是设置为auto,将占满整个容器的高度)
边距
margin:
margin: 20rpx 10rpx 25rpx 10rpx; (如果提供了四个参数,将用在上,右,下,左的顺序上)
margin: 20rpx; (如果只提供一个,就是作用在四个方向上)
margin: 20rpx 10rpx; (提供两个,一个用于上下,一个用于左右)
margin: 20rpx 10rpx 20rpx; (如果提供三个,第一个用于上,第二个用于左右,第三个用于下)
如果两个相邻的都有margin,就会出现合并的现象,合并后取其中大的值
margin-top,margin-right,margin-bottom,margin-left,分别对应上右下左的边距距离,可取值:auto/数值/百分比
padding: 同上(margin)
padding-top,padding-right,padding-bottom,padding-left,分别对应上右下左的内边距距离,可取值:auto/数值/百分比
相关文章推荐
- 微信聊天记录查看器(程序+源码) - iOS版
- 微信聊天记录查看器(程序+源码) - iOS版
- 微信小程序实例:map组件markers属性动态初始化
- 原创:微信小程序使用flex样式属性(干货)
- 微信小程序精品demo:电影推荐:位置,浏览记录历史,相册
- 微信/易信公共平台开发(三):记录用户状态,优化程序结构
- 微信小程序css篇----所有属性(按字母排列:c,d,e开头)
- 微信小程序全局窗口属性设置和单个窗口属性设置
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
- 微信小程序-利用wxParse将html转为wxml
- 微信小程序学习记录1-添加页面顺序
- 【微信小程序常见问题】下拉框设置picker哪个属性。
- 微信小程序开发技巧及填坑记录
- 微信小程序的学习(3)-视图层WXML
- 微信小程序学习记录
- 【2016.3.30项目技术记录】]VS2010自动生成MFC单文档框架程序的修改:去除属性框,在CViewTree类中添加鼠标单击响应
- 微信小程序-问题记录
- 【微信小程序常见问题】使用flex属性两边边距自适应解决方案
- 微信小程序css篇----所有属性(按字母排列:a开头)
- 微信小程序开发踩坑记录