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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。