flex-shrink属性指定与该容器内的其他项目相比,该项目将收缩多少。与放置在同一容器内的其他元素相比,它定义了元素收缩的能力。
注意:如果容器中的物料不是柔性物料,则flex-shrink属性将不会影响该物料。
用法:
flex-shrink:number| initial| inherit;
属性值:
- number:一个数字,用于定义商品与其他灵活商品相比的收缩方式。
- initial:它将值设置为默认值。
- inherit:它从其父元素继承属性。
例:在这里,我们将看到一个容器中有5个div,我们将在第二个div上应用flex-shrink,与其他4个div相比,该div会缩小。我们可以将flex-shrink应用于同一容器中的任何文档,并且该div会比其他div的宽度缩小;相对于该容器中的其他项目,flex-shrink会将该div缩小。
<!DOCTYPE html>
<html>
<head>
<title>
CSS | flex-shrink Property
</title>
<style>
#main {
width:450px;
height:200px;
border:1px solid black;
display:-webkit-flex;
display:flex;
color:white;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
#main div {
flex-grow:1;
flex-shrink:1;
flex-basis:100px;
}
<!-- shrinking the 2nd div compare to others -->
#main div:nth-of-type(2) {
flex-shrink:4;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The flex-shrink:number</h3>
<!-- Making 5 divs in main -->
<div id="main">
<div style="background-color:#009900;">
<p>
A number specifying how much the item
will shrink relative to the rest of the
flexible items.
</p>
</div>
<div style="background-color:#00cc99;">
<p> Default value is 1</p>
</div>
<div style="background-color:#0066ff;">
<p>
Initial Sets this property to
its default value
</p>
</div>
<div style="background-color:#66ffff;;"></div>
<div style="background-color:#660066;">
<p>
Inherits this property from
its parent element
</p>
</div>
</div>
</body>
</html>
输出:
支持的浏览器:CSS |下面列出了flex-shrink属性:
- 谷歌浏览器29.0
- Internet Explorer 11.0
- Mozila Firefox 28.0
- Opera 17.0
- Safari 9.0
相关用法
- HTML Style flexShrink用法及代码示例
- CSS transition-property用法及代码示例
- CSS nav-down用法及代码示例
- CSS nav-up用法及代码示例
- CSS all属性用法及代码示例
- CSS right属性用法及代码示例
- CSS nav-right用法及代码示例
- CSS top属性用法及代码示例
- CSS columns属性用法及代码示例
- CSS zoom属性用法及代码示例
- CSS nav-left用法及代码示例
- CSS resize属性用法及代码示例
- CSS clip属性用法及代码示例
- CSS will-change用法及代码示例
- CSS overflow-y属性用法及代码示例
注:本文由纯净天空筛选整理自Sabya_Samadder大神的英文原创作品 CSS | flex-shrink Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。