CSS |伸缩属性
伸缩属性指定与容器中的其他项目相比，该项目将缩小多少。它定义了与放置在同一容器内的其他元素相比，一个元素收缩的能力。
注意:如果容器中的物品不是柔性物品，则伸缩属性不会影响该物品。
语法:
flex-shrink: number| initial| inherit;
默认值:
- 1
属性值:
- 数字:定义该物品与其他柔性物品相比将如何收缩的数字。
- 初始值:设置默认值。
- inherit: 它从其父元素继承属性。
示例:这里我们将看到在单个容器中有 5 个 div，我们将在第 2 个 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 |伸缩属性支持的浏览器如下:
- 谷歌 Chrome 29.0
- Internet Explorer 11.0
- Mozilla Firefox 28.0
- Opera 17.0
- Safari 9.0
版权属于：月萌API www.moonapi.com，转载请注明出处
