微信小程序样式Flex Box精通课程-Flex项目的属性-flex-grow项目的放大比例
flex-grow项目的放大比例
基础语法
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item { flex-grow: <number>; /* default 0 */ }
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
如果一个项目的flex-grow属性为2,其他项目都为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 class='zong'>
<view class='fangxing1'>
<text>01</text>
</view>
<view class='fangxing2'>
<text>02</text>
</view>
<view class='fangxing3'>
<text>03</text>
</view>
</view>
设置区块的flex-grow
实例01
效果如图
下面我们设置01区块的flex-grow的值为1,其他区块不变;我们只需要改造01区块对应的样式(样式类名fangxing1)代码即可。
Wxss代码
.fangxing1{
width: 60px; height: 60px;
background-color: #f5f5dc;
margin: 5px;/*每个方框的外边距*/
flex-grow: 1;
}
我们可以看到01区块扩展占用了所有剩余的空白(内边距,外边距除外)
实例02
效果如图
下面我们设置02区块的flex-grow的值为1,其他区块不变;我们只需要改造02区块对应的样式(样式类名fangxing2)代码即可。
Wxss代码
.fangxing2{
width: 60px; height: 60px;
background-color: #f5f5dc;
margin: 5px;/*每个方框的外边距*/
flex-grow: 1;
}
实例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;
}
我们可以看到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;
}
我们可以看到所有的区块的宽度都都同样扩展占用了空余的地方(均分了空白区域)。
微信小程序样式Flex Box精通课程 https://edu.****.net/course/detail/10624