CSS flex-flow

admin發表於2019-04-11
CSSFlex

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

本文專注於介紹彈性佈局眾多屬性之一的flex-flow屬性。

此屬性非常簡單，因為它是彈性佈局的中flex-direction和flex-wrap屬性的合體。

也就是說flex-flow是上述兩個屬性的簡寫形式，其實就是一個複合屬性，類似於background等屬性。

所以掌握此屬性的關鍵在於掌握flex-direction和flex-wrap屬性的用法，關於前面三個屬性可以參閱下幾篇文章：

（1）.flex-direction參閱CSS flex-direction一章節。

（2）.flex-wrap參閱CSS flex-wrap一章節。

（3）.background參閱CSS background一章節。

此屬性用於容器元素，如果非彈性佈局，則設定此屬性沒有任何效果。

語法結構：

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

屬性值說明:

（1）.flex-direction：表示此位置是flex-direction屬性值。

（2）.flex-wrap：表示此位置是flex-wrap屬性值。

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

（4）.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: 200px;
  display:flex;
  flex-flow:row-reverse wrap;
  background:#ccc;
}
#main div {
  width: 50px;
  height: 50px;
  text-align:center;
  line-height:50px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>

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

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

程式碼分析如下：

（1）.外層div元素採用彈性佈局，為其應用flex-flow:row-reverse wrap。

（2）.row-reverse表示主軸是水平的，但是其實端在右側，wrap表示根據需要自動換行。

非常簡單的一個屬性，此時可能不少朋友會關心屬性值的順序會不會對結果產生影響。

很簡單，只要通過一個簡單程式碼例項就可以得出結論，將上述程式碼修改如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 200px;
  display:flex;
  flex-flow:wrap row-reverse;
  background:#ccc;
}
#main div {
  width: 50px;
  height: 50px;
  text-align:center;
  line-height:50px;
}
</style>
</head>
<body>
<div id="main">
  <div style="background-color:coral;">A</div>
  <div style="background-color:lightblue;">B</div>
  <div style="background-color:khaki;">C</div>
  <div style="background-color:pink;">D</div>
  <div style="background-color:lightgrey;">E</div>
  <div style="background-color:lightgreen;">F</div>
</div>
</body>
</html>

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

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

對上述程式碼分析如下：

（1）.此程式碼與上一個程式碼幾乎完全一樣，唯一的區別在於flex-flow屬性值位置坐了調整。

（2）.可以看到，表現結果沒有任何區別，也就是說屬性值的順序並不會對結果造成影響。

此屬性非常的簡單，不再進行過多的介紹，如果對本文有任何意見或者疑問可以在文章底部留言。

相關文章