小程序中的组件就相当于html中的标签, 比如div啊这种标签

小程序中的组件(标签)和组件的属性都是使用小写的

属性是用来修饰组件的, 它也分为很多类型, 比如Boolean, Nubmber, String等等

共同属性: 就是所有的组件都有的那些属性

比如, id(String类型), class(String), style(String), hidden(Boolean), data-*(Any), bind*/catch*(EventHandler)

当然组件也是分为不同的类型

视图容器

基础内容

表单

导航

多媒体

画布

弹性盒模型, 用于布局, 在父容器中的多个子容器弹性局

子容器可以横向排列也可以纵向排列, 父容器中没有flex-direction样式, 则为默认的纵向排列

如果有此样式, 如: flex-direction: column; 则子容器为纵向排列

纵向: 必须需要指定父容器的高度才能有效

横向: 不是必须要指定宽度, 不指定则屏幕总宽度

横向排列宽度由父容器决定, 子容器各自的宽度无效, 高度有效

纵向排列高度由父容器决定, 子容器各自的高度无效, 宽度有效

当然咯, 父容器的宽高是决定整体大小

如下为横向排列: 

就是加上display属性并赋值这个值  -->  display: -webkit-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
}
.b {
  background: green;
  flex:2
}
.c {
  background: blue;
  flex:2
}

如下为纵向排列:

/* test/test.wxss */
.flex-wrap {
  display: -webkit-flex;
  width: 500rpx;
  height: 1000rpx;
  flex-direction: column;
}
.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
}