综合教程

微信小程序flex box界面设计入门到精通-10课-Flex项目的属性-flex-shrink项目的缩小比例

时间:2019/1/6 11:09:04  作者:互联网  来源:网络转载  查看:56362  评论:0
内容摘要:基础语法flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。.item { flex-shrink: ; /* default 1 */ } 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩...

基础语法

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item { flex-shrink: <number>; /* default 1 */ }

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。


小程序应用

默认代码和效果

效果如

微信小程序flex_box界面设计入门到精通-10课-Flex项目的属性-flex-shrink项目的缩小比例

父容器设定了flex模式后,其内部的子元素默认都是按等比例缩小的。
Wxml代码

<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>

Wxss代码

.zong{

  display: flex;

  padding: 5px;/*内边距*/

}

.fangxing1{

  width: 300rpx; height: 300rpx; 

  background-color:  #f5f5dc;

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

}

.fangxing2{

  width: 300rpx; height: 300rpx; 

  background-color:  #f5f5dc;

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

}

.fangxing3{

  width: 300rpx; height: 300rpx; 

  background-color:  #f5f5dc;

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

}


实例01

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

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

Wxss代码

.fangxing1{

  width: 300rpx; height: 300rpx; 

  background-color:  #f5f5dc;

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

  flex-shrink: 0;
}


欢迎大家支持我的视频课程:微信小程序样式Flex Box精通课程
https://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述

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