flex-shrink属性在CSS新弹性盒模型中是比较常用，理解flex-shrink属性的各个方面，包括它的语法、取值、作用
1.flex-shrink定义和用法;
flex-shrink：<number>
默认值：1
适用于：弹性盒模型容器子元素
继承性：无
2.flex-shrink属性值
用数值来定义收缩比率。不允许负值
3.flex-shrink说明
设置或检索弹性盒的收缩比率。
- 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
-
flex-shrink实例:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS flex-shrink属性详解-CSS flex教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
#flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
#flex li{width:200px;}
#flex li:nth-child(1){background:#888;}
#flex li:nth-child(2){background:#ccc;}
#flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
</style>
</head>
<body>
<h1>flex-shrink示例：</h1>
<ul id="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
运行结果：
2253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
