CSS Flexbox:flex-shrink

自看楼主楼底

material

flex-shrink简介

flex-shrink属性在CSS新弹性盒模型中是比较常用的，本文将带你深入理解flex-shrink属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上flex-shrink的实例，希望能够对你有所帮助。

flex-shrink定义和用法

flex-shrink：<number>

默认值：1

适用于：弹性盒模型容器子元素

继承性：无

flex-shrink属性值

<number>：: 用数值来定义收缩比率。不允许负值

flex-shrink说明

设置或检索弹性盒的收缩比率。

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
示例：a,b,c将按照1:1:3的比率来收缩空间
对应的脚本特性为flexGrow。

来源：http://caibaojian.com/css3/properties/flex/flex-shrink.htm

2020-01-16 10:39 举报

板块信息详情

板名：学习资料: 主题：318; 帖子：0; 今日：0; 类别： CCS|; 使用用户查找的一些学习资料

热门讨论

1: 第一个页面从hello world开始; 0; 图文教程

2: 挟翼2.0正式上线！; 0; 动态与公告

3: CSS动画面板介绍; 0; 图文教程

4: hover鼠标经过的样式; 0; 图文教程

5: 为HTML元素设置文本; 0; 图文教程

6: 关于创建tmpDIV说明(class=&amp;quot;__tmp&amp;quot;); 0; 图文教程

7: 为HTML元素设置click事件; 0; 图文教程

8: CSS3 transition-timing-function 属性说明; 0; CCS教程

9: max和min值介绍; 0; 图文教程

10: HTML元素的样式解析; 0; 图文教程

11: 创建一个新的项目; 0; 图文教程

12: 利用边框弧度来绘制一个月亮; 0; 图文教程

13: margin-top失效解决办法; 0; 图文教程

14: 设置HTML元素的OnMouseOver事件; 0; 图文教程

15: 主界面介绍; 0; 图文教程

16: 快捷键介绍; 0; 图文教程

关于挟翼

挟翼一款提供UI页面设计的软件。
您只需要动一动鼠标绘制相关的元素，软件会自动帮你完成CSS样式和HTML代码。
从现在开始注册，立即赠送一年VIP会员。活动结束日期待定。

关注ME！

微博：新浪微博 Mail：admin@xieyisoft.com

Copyright @ 2018-2025 京ICP备15002500号-3