 |
位置：电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
|
位置：电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) | 推荐学习资源 |
| 当前阅读教程：Flex Box小程序应用 > 放大比例（flex-grow） | |
| 阅读(22555525) 收藏 赞(5685) 分享 | |
| 上一篇： 子元素的排序（order） | 下一篇： 缩小比例（flex-shrink） |
|
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。示意图如7-33所示。 代码示例如下： .item { flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 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文件代码示例如下： <view> <view> <text>01</text> </view> <view class='fangxing2'> <text>02</text> </view> <view class='fangxing3'> <text>03</text> </view> </view> 效果如图7-34所示。
2.设置区块的flex-grow实例01下面我们设置01区块的flex-grow的值为1，其他区块不变；我们只需要改造01区块对应的样式（样式类名fangxing1）代码即可。 .wxss文件代码示例如下： .fangxing1{
width: 60px; height: 60px;
background-color: #f5f5dc;
margin: 5px;/*每个方框的外边距*/
flex-grow: 1；
}效果如图7-35所示。
我们可以看到01区块扩展占用了所有剩余的空白（内边距，外边距除外）。 实例02下面我们设置02区块的flex-grow的值为1，其他区块不变；我们只需要改造02区块对应的样式（样式类名fangxing2）代码即可。 .wxss文件代码示例如下： .fangxing2{
width: 60px; height: 60px;
background-color: #f5f5dc;
margin: 5px;/*每个方框的外边距*/
flex-grow: 1；
}效果如图7-36所示。
实例03下面我们设置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;
}效果如图7-37所示。
我们可以看到03区块的大小不变，01和02区块的宽度都都同样扩展占用了空余的地方。 实例04下面我们所有区块的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;
}效果如图7-38所示。
我们可以看到，所有的区块的宽度都同样扩展占用了空余的地方（均分了空白区域）。 |
|
| 上一篇： 子元素的排序（order） | 下一篇： 缩小比例（flex-shrink） |
