CSS flex-shrink属性用法及代码示例

CSS flex-shrink 属性指定一个项目将比容器的其他项目缩小多少。它设置 flex-item 的 flex 收缩因子(一个数字，决定了 flex 项目将收缩多少)。

我们可以在 flex-items 之间分配负空间，使得某些项目比其他项目占用更多的负空间。可以通过将 flex-shrink 属性的值设置为 2 来完成。因此，flex-item 与 flex-shrink:2；将比 flex-shrink:1 缩小两倍；即，它占用的负空间是其他空间的两倍。 flex-shrink 值越高，该项目比其他项目收缩得越多。

分配负空间时，flex 收缩因子乘以 flex-basis。 flex-basis 是项目的初始大小。

它只对 flex-items 起作用，所以如果容器中的物品不是 flex-item，则 flex-shrink 属性不会影响对应的物品。通常，此 CSS 属性与 flex-grow 和 flex-basis 等其他 flex 属性一起使用，通常由 flex 简写定义，以确保设置所有值。

用法

flex-shrink:number| initial | inherit;

值

number:它是确定弯曲收缩系数的正数。它的默认值为 1，表示默认情况下项目不收缩。它不允许负值。此值指定与其他灵活项目相比，该项目将缩小多少。

initial:它将此属性设置为其默认值。

inherit:它从其父元素继承此属性。

示例

在这个例子中，有两个容器，每个容器有五个 flex-items。容器的宽度和高度分别为 400px 和 100px。

在第一个容器中，我们应用 flex-shrink:5；到第三项，flex-shrink:initial;到第四项，flex-shrink:inherit;到第五项。

在第二个容器中，我们应用 flex-shrink:8；到第二项，flex-shrink:10；到第三项，和 flex-shrink:6;到第四项。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
width:400px;
height:100px;
border:5px solid red;
display:flex;
background-color:blue;
margin:30px;
}
.flex-item{
background-color:lightblue;
font-size:25px;
margin:5px;
flex-grow:1;
flex-shrink:1;
flex-basis:100px;
}

</style>
</head>
<body>

<h1> Example of the flex-shrink property </h1>
<div class="container">
<div class = "flex-item"></div>
<div class = "flex-item"></div>
<div class = "flex-item" style = "flex-shrink:5;"> 5 </div>
<div class = "flex-item" style = "flex-shrink:initial;"> initial </div>
<div class = "flex-item" style = "flex-shrink:inherit;"> inherit </div>
</div>
<div class="container">
<div class = "flex-item"></div>
<div class = "flex-item" style = "flex-shrink:8;"> 8 </div>
<div class = "flex-item" style = "flex-shrink:10;"> 10 </div>
<div class = "flex-item" style = "flex-shrink:6;"> 6 </div>
<div class = "flex-item"></div>
</div>

</body>
</html>

输出

让我们看一个 flex-shrink 属性的另一个例子。

示例

在这个例子中，有一个容器，有五个 flex-items。容器的宽度和高度分别为 400px 和 100px。我们将 flex-shrink 属性应用于将比其他项目占用更多负空间的两个项目。 flex-items 的 flex-basis 的值为 150px。

<!DOCTYPE html>
<html>
<head>
<style>

.container {
width:400px;
height:100px;
padding:10px;
display:flex;
background-color:lightblue;
}

.flex-item {
background-color:pink;
margin:3px;
text-align:center;
font-size:30px;
flex-basis:150px;
flex-grow:0;
}
</style>
</head>
<body>
<div class="container">
<div class="flex-item" style = "flex-shrink:3;"> 1 </div>
<div class="flex-item" > 2 </div>
<div class="flex-item" style = "flex-shrink:5;" > 3 </div>
<div class="flex-item" > 4 </div>
<div class="flex-item" > 5 </div>
</div>
</body>
</html>

输出

相关用法

注：本文由纯净天空筛选整理自 CSS flex-shrink property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。