微信小程序day02_04之flex 成员元素样式设置

一. flex 容器成员的属性

• order : 成员之间的显示顺序
• flex : 成员所占用屏幕的比例

代码示例 测试order 在index.wxss中, 写如下的代码 使用order 进行排序 把abcde 的order, 按照从大到小的排序

.container{
  display: flex;
}

.size {
  width: 110rpx;
  height: 150rpx;
}

.a {
  background: red;
  order: 5;
}
.b {
  background: gray;
  order: 4;
}
.c {
  background: yellow;
  order: 3;
}
.d {
  background: orange;
  order: 2;
}
.e {
  background: green;
  order: 1;
}

最终的显示效果如图所示: 可以看到是按照 order的从小到大的顺序进行排序显示的 flex 的代码示例 在abcde中 设置flex, 其值分别为 8,6,4,2,1

.a {
  background: red;
  order: 5;
  flex: 8
}
.b {
  background: gray;
  order: 4;
  flex: 6
}
.c {
  background: yellow;
  order: 3;
  flex: 4
}
.d {
  background: orange;
  order: 2;
   flex: 2
}
.e {
  background: green;
  order: 1;
    flex: 1
}

最终显示的效果如图, 可以看到a的显示 的宽度最宽, 按照 abcde进行递减宽度. 因此 是把flex设置的值,进行相加,再相除,得出每个元素所占的比例.