CSS flex-shrink

admin發表於2019-04-12
CSSFlex

關於彈性佈局的總體介紹可以參閱display:flex 彈性佈局一章節。

上述文章對彈性佈局進行了概括性介紹，但過於簡略，很多初學者難以理解。

本文專注於通過程式碼例項對其中屬性之一flex-shrink進行詳細介紹。

一.基礎概念：

從"彈性佈局"這個名稱也可以看到，此佈局方式可以做到"能屈能伸"。

關於"伸"的相關知識可以參閱CSS flex-grow 屬性一章節。

flex-shrink屬性則體現了彈性佈局"屈"的一面，可以讓專案尺寸收縮。

此屬性規定容器中專案在主軸上的縮小比例，預設值為1。

需要特別注意如下幾點：

（1）.此屬性應用於容器中的專案之上。

（2）.必須容器主軸上的尺寸小於專案尺寸，才有可能縮小。

（3）.屬性值為0，表示專案部縮小。

（4）.必須應用彈性佈局環境中，否則無效。

語法結構：

[CSS] 純文字檢視 複製程式碼
flex-shrink: number|initial|inherit;

屬性值說明:

（1）.number：預設值是 1，容器中的專案相對於其他專案的搜尋比率。

（2）.initial：容器中的專案預設方式顯示，可以參閱CSS initial 屬性一章節。

（3）.inherit：從父元素繼承該屬性。

也許對上面屬性的闡述，不少朋友感覺不容易理解，這個完全不用擔心。

文章的最後會有詳細的程式碼例項，對屬性的作用進行演示。

瀏覽器相容：

（1）.IE10+瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.火狐瀏覽器支援此屬性。

（4）.谷歌瀏覽器支援此屬性。

（5）.Opera瀏覽器支援此屬性。

（6）.safria瀏覽器不支援此屬性。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width:350px;
  height:100px;
  background:#ccc;
  display:flex;
}
#main div {
  flex-shrink:1;
  flex-basis:100px;
}
#main div:nth-of-type(2) {flex-shrink:3;}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:green;"></div>
</div>
<div id="ant"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/12/174825jf9v9jxfjapj3sn6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.外層div元素被設定為彈性佈局，作為容器，寬度是350px。

（2）.容器中有5個專案，通過flex-basis屬性設定專案在主軸方位的尺寸為100px。

（3）.5個專案的尺寸為500px，明顯超過容器的350px。

（4）.通過flex-shrink屬性設定專案的伸縮比率，第二個是2，其他的為1。

（5）.可以看到在主軸方位上的尺寸進行了伸縮，以適應容器的主軸方位的尺寸。

下面關鍵問題來了，如何去計算每一個專案的具體收縮的值，以上述程式碼為例子進行分析。

（1）.容器尺寸是350px，專案總尺寸是500px，缺口150px。

（2）.這150px的缺口需要5個專案區分擔，每一個專案的分擔的尺寸由flex-shrink屬性值決定。

（3）.flex-shrink屬性值越大，那麼分擔的越多，按照屬性值大小比例進行劃分。

（4）.計算方式是，將每一個專案的flex-shrink屬性值相加，然後再按照比例進行計算。

第一個div承擔縮小量：150*（1/7）

第二個div承擔縮小量：150*（3/7）

第三個div承擔縮小量：150*（1/7）

第四個div承擔縮小量：150*（1/7）

第五個div承擔縮小量：150*（1/7）

然後每一個專案減去承擔的縮小量，就是最後實現的尺寸。

相關文章