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

阳光穿透心脏的1/2处 2022-03-10 05:24 143阅读 0赞

### 文章目录 ###

*   *   *  一. 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的从小到大的顺序进行排序显示的  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
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设置的值,进行相加,再相除,得出每个元素所占的比例.  
![20190309184807443.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/ed1aaa5f68e6413191d92661d9791dde.png
[20190309184807443.png]: /images/20220310/fd8e516b21a749c08c27cb86e424d239.png