CSS flex-direction

admin發表於2019-04-11
CSSFlex

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

雖然有對flex-direction屬性的介紹，但非常簡單，本文再通過程式碼例項對其進行詳細介紹。

本站總是強調對於屬性的理解，可以從其名稱入手，flex-direction解析如下：

（1）.flex：表示此屬性專屬於彈性佈局，在非彈性佈局中沒有任何效果。

（2）.direction：翻譯成漢語具有"方向"的意思。

由此可以猜測，此屬性用於彈性佈局與方向相關的設定，事實也是如此。

彈性佈局容器具有主軸和交叉軸兩根軸線，預設狀態下，主軸是水平的，方向是從左到右。

flex-direction屬於用於設定彈性佈局容器主軸的方向，實質也就是設定專案在主軸的排列方向。

語法結構：

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

屬性值說明：

（1）.row：預設值，主軸是水平的，起始位置在左側，專案從左到右排列。

（2）.row-reverse：主軸是水平的，起始位置在右側，專案從右到左排列。

（3）.column：主軸是垂直的，起始位置在頂端，專案垂直顯示，從上到下。

（4）.column-reverse：主軸是垂直的，起始位置在底部，專案垂直顯示，從下到上。

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

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

簡單圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201904/11/110718cthlrl9hzuwqw6n3.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

瀏覽器支援性：

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

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

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

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

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

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

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  display:flex;
  flex-direction:row;
  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/110840s7draddx222j7eza.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

預設狀態下，主軸是水平的，且左側為起始位置。

那麼容器的專案排列方向就是從左至右，上述程式碼演示的很清楚。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
#main {
  width: 400px;
  display:flex;
  flex-direction: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/110904ez268gh72hnuttns.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼通過將flex-direction屬性值設定為row-reverse，那麼容器的主軸雖然還是水平，但是起始位置變為右側，所以專案是從右到左排列，與預設狀態方向顛倒。

[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-direction:column;
  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/110942iom3o1fxoyfhsfbs.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過flex-direction:column將容器主軸設定為垂直方向，預設是水平的。

主軸的起始位置在頂端，所以專案是從上至下排列。

本屬性較為簡單，其他屬性值不再一一舉例演示，感興趣的可以自行測試。

如果對於本文章有任何疑問或者建議，可以在文章底部留言，本站會第一時間回覆。

相關文章