【CSS基础】flex-shrink
flex-shrinkflex-shrink 属性指定了 flex 元素的收缩规则含义及用法：flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。flex-shrink用来干嘛呢？比如你设置了一个父元素4
·
flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则
含义及用法：
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。
flex-shrink用来干嘛呢？
比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。超了怎么办？还有得救。flex-shrink 按比例压缩。
<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>
<ul id="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
上述代码中第三个li设置了flex-shrink属性为3，另外两个没设置，没设置默认1. 好。现在多戳200px。分成5份。
按比例压缩吧
a压缩200（1/5)=40px;
b同理40px;
c压缩200（3/5)=120px;
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)