位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 放大比例(flex-grow)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 子元素的排序(order) 下一篇: 缩小比例(flex-shrink)

flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。示意图如7-33所示。

代码示例

小白教程网www.2d5.net

如下:

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

image.png

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。

如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

1.默认代码和效果

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

.wxml文件代码示例

小白教程网www.2d5.net

如下:

.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文件代码示例

小白教程网www.2d5.net

如下:

<view>
   <view>
    <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view>
</view>

效果如图7-34所示。

image.png



2.设置区块的flex-grow

实例01

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图7-35所示。


image.png


我们可以看到01区块扩展占用了所有剩余的空白(内边距,外边距除外)。

实例02

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:


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

效果如图7-36所示。

image.png


实例03

下面我们设置0102区块的flex-grow的值为103区块不变。

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.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所示。

image.png

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

实例04

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

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.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所示。

image.png

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


上一篇: 子元素的排序(order) 下一篇: 缩小比例(flex-shrink)
毕业设计网             广告联系QQ:45157718(微信同号)