CSS flex-grow 屬性

admin發表於2019-04-11
CSSFlex

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

上面是一篇概括性文章，僅對相關屬性進行了基礎介紹，細節方面有所欠缺。

本文則通過程式碼例項詳細介紹一下彈性佈局中的flex-grow屬性。

一.彈性佈局概括：

彈性佈局的內容較多，相關文章的篇幅通常也很長，從各種角度進行分析，看起來比較複雜。

其實說來說去，就是告訴讀者這麼一個事情，子專案如何去分配容器的空間。

既然是彈性佈局，那麼子專案自然可以做到能伸能屈，如此通俗的介紹估計能對理解有所幫助。

二.flex-grow屬性：

前面提到過彈性佈局就是專案可以做到能伸能屈，此屬性就是用來規定專案"伸"。

flex-grow屬性定義專案的放大比例，預設為0，也就是不進行放大。

如果容器不存在剩餘空間，那麼也就無法進行放大操作。

語法結構：

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

屬性值說明：

（1）.number：一個數值，預設為0，用於規定子專案的放大比例，這個比例要和其他專案對比進行確定。

（2）.initial：專案以預設方式顯示，具體參閱CSS initial 屬性一章節。

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

上述程式碼都是理論闡述，可能讀過之後還是感覺一頭霧水，不用擔心，後面會有詳細的程式碼例項分析。

三.程式碼例項如下：

[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-basis:50px;}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 1;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</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:lightgrey;"></div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023317k78imruia8ia6omi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.首先，容器採用display: flex彈性佈局，總寬度是350畫素。

（2）.子專案的基準寬度是50畫素，五個子專案總共佔據250畫素，所以容器還有剩餘空間。

（3）.預設狀態下，flex-grow屬性值是0，也就是不放大擴充套件，上述程式碼設定每一個子專案的flex-grow屬性值為1，也就是它們平均瓜分容器剩餘的空間，所以最終結果是五個子專案佔據的空間是相同的。

下面再來看一個不是平均分配剩餘空間的程式碼例項：

[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-basis:50px;}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</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:lightgrey;"></div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023348cgjjzdlejj8dj8o2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到，第二個div的寬度要明顯大於其餘div，程式碼分析如下：

（1）.首先，容器採用display: flex彈性佈局，總寬度是350畫素。

（2）.子專案的基準寬度是50畫素，五個子專案總共佔據250畫素，所以容器還有剩餘空間。

（3）.第二個div的flex-grow屬性值為3，其餘div的flex-grow屬性值為1。

（4）.也就是說第二個div瓜分到的剩餘空間是其他div的三倍，特別注意的是，不是第二個div的尺寸是其他div的三倍，而是第二個div瓜分到容器剩餘空間是其他div的三倍。

佔據剩餘空間尺寸的計算方式：可以認為將剩餘空間劃分為(1+3+1+1+1)=7份，每一份的尺寸等於剩餘空間/7。

那麼每一個div的尺寸就是：

（1）.50px+100/7

（2）.50px+(100/7)*3

（3）.50px+100/7

（4）.50px+100/7

（5）.50px+100/7

[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-basis:70px;}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</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:lightgrey;"></div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023418eab8h2l8hda8ud87.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

雖然設定的瓜分比例不同，但是每一個div的尺寸卻是相同的。

因為容器已經沒有任何剩餘空間了，所以每一個子專案必須各守本分。

還有一個比較極端的情況，那就是不設定子專案的初始寬度，僅設定flex-grow屬性。

那麼此時各個子專案的尺寸就以flex-grow屬性值比例進行劃分，程式碼例項如下：

[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:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}
  
</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:lightgrey;"></div>
</div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/023447wvzuav9g4lwwwwag.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

沒有設定初始的寬度，那麼各個子專案的尺寸按照flex-grow順序值比例進行劃分。

於是各個div的寬度分別如下：

（1）.350*(1/7)

（2）.350*(3/7)

（3）.350*(1/7)

（4）.350*(1/7)

（5）.350*(1/7)

非常的簡單，不再多介紹，如果有任何問題可以在文章底部留言。

相關文章