flex-basis與width區別

admin發表於2019-04-12
Flex

越是功能相近的屬性越需要精準的掌握它們之間的區別，否則應用的時候可能會出現各種問題。

標題中兩個屬性在某些時候表現完全相同，具有相當的迷惑性，當然兩者是有本質區別的。

關於標題中兩個屬性的基本知識可以參閱如下兩篇文章：

（1）.flex-basis屬性可以參閱CSS flex-basis一章節。

（2）.width屬性可以參閱CSS max-width/min-width設定元素尺寸一章節。

下面通過程式碼例項詳細分析一下兩者的區別，首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
.top,.bottom{
  width:150px;
  height:60px;
  background:#ccc;
  display:flex;
  margin:5px;
}
.top div{flex-basis:40px;}
.top div:nth-of-type(2){
  flex-basis:80px;
}

.bottom div{
  width:40px;
}
.bottom div:nth-of-type(2){
  width:80px;
}
</style>
</head>
<body>
<div class="top">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
</div>
<div class="bottom">
    <div style="background-color:coral;"></div>
    <div style="background-color:lightblue;"></div>
  </div>
</body>
</html>

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

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

可以看到，兩個屬性的表現完全一樣，當然兩者是有區別的，否則兩個屬性就沒必要同時存在。

首先總結一下兩個屬性最為明顯的區別：

（1）.flex-basis屬性優先順序高於width屬性，所以在彈性佈局中只使用flex-basis屬性即可（注意後面分析，此闡述不完全正確）。

（2）.各主流瀏覽器都支援width屬性，但是隻有IE10+和其他標準瀏覽器支援flex-basis屬性。

（3）.flex-basis屬性只能用於彈性佈局中，width適用範圍比較廣既可以在彈性佈局，也可以在非彈性佈局。

上面羅列了兩個屬性的三個區別，但是並未涉及到兩者的本質區別，flex-basis規定的是專案的尺寸，但並不代表規定的必定是專案的寬度。flex-basis實質上規定的是主軸方向，專案的尺寸，並不能一概以寬度來論，因為主軸不但可以水平方位，也可以是垂直方位，width則是實實在在規定元素的寬度。

看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 140px;
  height: 300px;
  background:#ccc;
  display: flex;
  flex-direction: column;
}
#main div {
  width: 70px;
  flex-basis:140px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:green;"></div>
  <div style="background-color:blue;"></div>
</div>
</body>
</html>

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

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

程式碼分析如下：

（1）.通過flex-direction: column將容器的主軸由水平方向修改為垂直方位。

（2）.通過width設定專案的寬度為70px。

（3）.設定flex-basis屬性值為140px，可以看到專案的尺寸並沒有變為140px。

（4）.所以，我們不能說flex-basis是用來設定寬度的，它是設定主軸方向專案的尺寸，上面程式碼因為主軸是垂直的，所以此屬性看起來是設定專案的高度，此時它的優先順序要高於height屬性。

通過上面的介紹，可以看到兩個屬性是有本質區別的，一個是設定主軸方向專案的尺寸（不一定是寬度），一個是實實在在設定元素的寬度，理解這一點，那麼應用中就不會再有什麼問題了，如果對文字有任何問題和疑問，可以在文章底部留言，本站會第一時間回覆。

相關文章