CSS flex-basis

admin發表於2019-04-11
CSSFlex

在display:flex 彈性佈局一章節對彈性佈局進行了概括介紹。

上述文章能夠讓讀者在總體上對彈性佈局有一個基本的認識與把握。

但是如果要熟練應用，則需要對彈性佈局涉及的相關屬性有比較深入的瞭解。

本文將通過程式碼例項詳細介紹一下flex-basis屬性的用法。

一.彈性佈局概括：

實質上彈性佈局規定的是容器與子專案之間的關係。

給元素設定display:flex，它會變成容器，內部的子專案會根據為其設定的屬性進行佈局。

再通俗一點講，就是子專案如何分配容器的空間，更多的時候是分配容器的"剩餘空間"。

所謂剩餘空間就是在主軸方向，除去專案所佔據的空間後，所剩餘的空間。

二.flex-basis屬性：

理解此屬性可以從其名稱入手，flex表示它是彈性佈局的屬性，basis翻譯成漢語具有"基準"或者"基礎"的意思。

名副其實，此屬性用於規定在分配多餘空間之前，專案佔據的主軸空間，也就是為專案設定一個最初的基準尺寸。

既然是一個基準尺寸，那麼也就意味著可以在這個尺寸基礎上進行擴充套件或者收縮，後面會有介紹。

語法結構：

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

屬性值說明:

（1）.number：長度單位或者百分比，規定flex專案的初始長度。

（2）.auto：預設值，長度等於flex專案本身長度，如果專案未指定長度，根據內容決定。

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

（4）.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:40px;}
#main div:nth-of-type(2){flex-basis:80px;}
</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>
</body>
</html>

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

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

通過flex-basis屬性設定第一、第三、第四和第五個div長度為40px，第二div長度為80px。

此時它的作用與width是一直的，關於兩者區別可以參閱flex-basis與width區別一章節。

可以看到容器還有剩餘的空間，那麼我們可以在通過flex-basis屬性設定的"基準"尺寸的基礎上進行擴充套件。

下面看一個程式碼例項，演示瞭如何在"基準"尺寸的基礎上瓜分容器剩餘空間，程式碼例項如下：

[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:40px;}
#main div:nth-of-type(2){
  flex-basis:80px;
  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:green;"></div>
</div>
</body>
</html>

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

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

第二個div會佔據所有的剩餘空間，通過flex-grow屬性實現對剩餘空間再分配功能。

關於flex-grow屬性的具體用法，本文不再介紹，具體參閱CSS flex-grow一章節。

當然也可能子專案的總尺寸會超過容器，那麼就要收縮，具體參閱CSS flex-shrink一章節。

四.max-width與min-width的限制：

flex-basis屬性並不能為所欲為，它的最大值和最小值可以被上述兩個屬性限制。

也就是說，flex-basis最大值不會超過max-width規定的值，flex-basis最小值不會小於min-width規定的值。

看如下程式碼例項：

[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:40px;}
#main div:nth-of-type(2){
  flex-basis:80px;
  max-width: 20px;
}
#main div:nth-of-type(3){
  flex-basis:10px;
  min-width: 60px;
}
</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>
</body>
</html>

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

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

上述程式碼通過分別通過max-width與min-width限制了flex-basis規定的值。

相關文章