小程序组件概念与弹性盒模型

小程序中的组件就相当于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;  让子元素上下居中

同时应用时, 还可以对元素内的文本居中