小程序中的组件就相当于html中的标签, 比如div啊这种标签
小程序中的组件(标签)和组件的属性都是使用 小写 的
属性是用来修饰组件的, 它也分为很多类型, 比如Boolean, Nubmber, String等等
共同属性: 就是所有的组件都有的那些属性
比如, id(String类型), class(String), style(String), hidden(Boolean), data-*(Any), bind*/catch*(EventHandler)
当然组件也是分为不同的类型
- 视图容器
- 基础内容
- 表单
- 导航
- 多媒体
- 画布
弹性盒模型, 用于定位父容器中 一个或多个 子容器
在父标签样式设置中使用 display:flex 表示此父标签是一个弹性盒容器
在子标签样式设置中使用flex:x表示此子标签占父标签高度或宽度的x份
子标签可以横向排列也可以纵向排列
如果父标签中只有display:flex样式, 没有flex-direction样式(即没有指定子标签横向或纵向排列), 则子标签默认布局为 横向排列
如果有flex-direction样式, 且 flex-direction: column; 则子容器为纵向布局
使用display: -webkit-flex; 或 display : flex 标识为盒子布局
.flex-wrap { /*没有设置子容器的排列方向, 默认为横向*/
display: -webkit-flex;
width: 500rpx;
}
.flex-wrap view { /*子容器的宽度由占比决定*/
height: 200rpx;
text-align: center;
font-size: 80rpx;
line-height: 100rpx;
color: white;
}
.a {
background: red;
flex:1 /*占比为1*/
}
.b {
background: green;
flex:2 /*占比为2*/
}
.c {
background: blue;
flex:2 /*占比为2*/
}
.flex-wrap {
height: 1000rpx;
flex-direction: column; /*纵向排列*/
display: -webkit-flex;
}
.flex-wrap view { /*子容器的高度由占比决定*/
width: 90rpx;
text-align: center;
font-size: 80rpx;
line-height: 100rpx;
color: white;
}
.a {
background: red;
flex:1
}
.b {
background: green;
flex:2
}
.c {
background: blue;
flex:2
}
.parent {
display: flex;
background-color: pink;
border: 1rpx solid red;
}
.parent view { /*子容器没有使用flex:xx, 则不按占比来排列*/
width: 250rpx; /*设置各子容器的宽*/
height: 200rpx; /*设置各子容器的高*/
border: 1rpx solid green;
align-items: center; /*横向居中*/
justify-content: center; /*纵向居中*/
}
横向排列可以使用 align-items: center; 让子元素左右居中
纵向排列可以使用 justify-content: center; 让子元素上下居中
同时应用时, 还可以对元素内的文本居中