微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例

你的名字 2024-02-19 15:39 8阅读 0赞

### flex-grow项目的放大比例 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

**基础语法**  
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item { flex-grow: <number>; /* default 0 */ }

![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例][Flex Box_-Flex_-flex-grow]

> 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。  
> 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

### 小程序应用 ###

默认效果  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例][Flex Box_-Flex_-flex-grow 1]

> 为了效果明显，我们将每个方框的长宽都调整为60px。

**Wxml代码**

.zong{ 
      display: flex; 
      flex-direction: row  ;
      padding: 5px;/*内边距*/
    }
    .fangxing1{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
    }
    .fangxing2{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      }
    .fangxing3{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
    }

**Wxss代码**

### 设置区块的flex-grow ###

实例01  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例][Flex Box_-Flex_-flex-grow 2]

> 下面我们设置01区块的flex-grow的值为1，其他区块不变；我们只需要改造01区块对应的样式（样式类名fangxing1）代码即可。

**Wxss代码**

.fangxing1{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-grow: 1；
    }

> 我们可以看到01区块扩展占用了所有剩余的空白（内边距，外边距除外）

**实例02**  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例][Flex Box_-Flex_-flex-grow 3]

> 下面我们设置02区块的flex-grow的值为1，其他区块不变；我们只需要改造02区块对应的样式（样式类名fangxing2）代码即可。

**Wxss代码**

.fangxing2{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-grow: 1；
    }

**实例03**  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例][Flex Box_-Flex_-flex-grow 4]

> 下面我们设置01和02区块的flex-grow的值为1，03区块不变。

**Wxss代码**

.fangxing1{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-grow: 1;
    }
    .fangxing2{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-grow: 1;
    }

> 我们可以看到03区块的大小不变，01和02区块的宽度都都同样扩展占用了空余的地方。

**实例04**  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例][Flex Box_-Flex_-flex-grow 5]

> 下面我们所有区块的flex-grow的值为1。

**Wxss代码**

.zong{ 
      display: flex; 
      flex-direction: row  ;
      padding: 5px;/*内边距*/
    }
    .fangxing1{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-grow: 1;
    }
    .fangxing2{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-grow: 1;
    }
    .fangxing3{
      width: 60px; height: 60px;  
      background-color:  #f5f5dc;
      margin: 5px;/*每个方框的外边距*/
      flex-grow: 1;
    }

> 我们可以看到所有的区块的宽度都都同样扩展占用了空余的地方（均分了空白区域）。

[欢迎大家收看我的视频教程：微信小程序界面设计布局Flex Box精通课程 （微信小程序界面设计必备技能）][Flex Box_]

![微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例][Flex Box_-Flex_-flex-grow 6]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[Flex Box_-Flex_-flex-grow]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/43f555b2d5ee4839a2f6271e361d7cc8.png
[Flex Box_-Flex_-flex-grow 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e5c71bc166d4470188f6963f65726e67.png
[Flex Box_-Flex_-flex-grow 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2b7edd98320340b29e38d6bc3790f582.png
[Flex Box_-Flex_-flex-grow 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ba6764a40b4f48f5b98c83fa0991a5a1.png
[Flex Box_-Flex_-flex-grow 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e9fddee8d327414b878e7a1b81cff5d4.png
[Flex Box_-Flex_-flex-grow 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8186a22432f94436b17d8a1b46d35b27.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[Flex Box_-Flex_-flex-grow 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d701e9cd6a3b4c25ac5e24a108727bee.png