文章目录
一. 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设置的值,进行相加,再相除,得出每个元素所占的比例.
