综合教程

微信小程序flex box界面设计入门到精通-09课-Flex项目的属性-flex-grow项目的放大比例

时间:2019/1/6 11:05:04  作者:互联网  来源:网络转载  查看:56349  评论:0
内容摘要:基础语法flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。.item { flex-grow: ; /* default 0 */ }   如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果...

基础语法

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

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


微信小程序flex_box界面设计入门到精通-09课-Flex项目的属性-flex-grow项目的放大比例
  如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。

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




小程序应用

默认效果

效果如图
微信小程序flex_box界面设计入门到精通-09课-Flex项目的属性-flex-grow项目的放大比例

为了效果明显,我们将每个方框的长宽都调整为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
效果如图
微信小程序flex_box界面设计入门到精通-09课-Flex项目的属性-flex-grow项目的放大比例
下面我们设置01区块的flex-grow的值为1,其他区块不变;我们只需要改造01区块对应的样式(样式类名fangxing1)代码即可。

Wxss代码

.fangxing1{

  width: 60px; height: 60px; 

  background-color:  #f5f5dc;

  margin: 5px;/*每个方框的外边距*/

  flex-grow: 1

}

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

 

实例02
效果如图

微信小程序flex_box界面设计入门到精通-09课-Flex项目的属性-flex-grow项目的放大比例

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

Wxss代码

.fangxing2{

  width: 60px; height: 60px; 

  background-color:  #f5f5dc;

  margin: 5px;/*每个方框的外边距*/

  flex-grow: 1

}

实例03
效果如图
微信小程序flex_box界面设计入门到精通-09课-Flex项目的属性-flex-grow项目的放大比例

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

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区块的大小不变,0102区块的宽度都都同样扩展占用了空余的地方。

 

 

实例04
效果如图

微信小程序flex_box界面设计入门到精通-09课-Flex项目的属性-flex-grow项目的放大比例


下面我们所有区块的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://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述

相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |