CSS flex-wrap

admin發表於2019-04-11
CSSFlex

flex-wrap屬性是眾多的彈性佈局屬性之一，本文將結合程式碼例項對其進行詳細介紹。

關於彈性佈局的基本用法本文不做介紹，具體參閱display:flex 彈性佈局一章節。

對於此屬性的介紹，依然堅持本站的風格，從名稱入手，flex-wrap解析如下：

（1）.flex：說明此屬性是專用於彈性佈局，對於非彈性佈局此屬性無效。

（2）.wrap：這個單詞就更熟悉了，CSS中大量屬性中都包含此單詞，無一例外都是與換行相關，比如overflow-wrap屬性，flex-wrap屬性也不例外。

此屬性應用於容器元素，從上述名稱分析來看，它可能用於設定於專案是否換行有關。

事實也是如此，flex-wrap屬性規定專案是否拆行或拆列。

語法結構：

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

屬性值說明：

（1）.nowrap：預設值，規定容器中的專案不會拆行或者拆列顯示。

（2）.wrap：規定容器中的專案在需要的時候自動進行拆行或者拆列顯示。

（3）.wrap-reverse：規定容器中的專案在需要的時候自動進行拆行或者拆列顯示，但順序相反。

（4）.initial：規定容器中的專案一預設方式顯示，可以參閱CSS initial 屬性一章節。

（5）.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;
  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/123310v8s3l87f0zzcn3vj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼的表現解析如下：

（1）.外層div元素採用display:flex，那麼它成為一個彈性佈局容器，寬度為200畫素。

（2）.容器具有六個專案，每個專案的寬度是50畫素，所以專案總寬度是300畫素。

（3）.很明顯專案的總寬度超過容器的寬度，如果是普通佈局，很明顯內部子元素會產生換行。

（4）.但是彈性佈局非常的靈活，既然是彈性佈局，那麼就可以能伸能縮。

（5）.預設狀態下，專案不會自動換行，而是自動收縮以適應容器。

[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-wrap: wrap;
  background:#ccc;
}
#main div {
  width: 50px;
  height: 50px;
  text-align:center;
}
</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/123335l85k8pz89q5k0p81.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼解析如下：

（1）.外層div元素採用display:flex，那麼它成為一個彈性佈局容器，寬度為200畫素。

（2）.容器具有六個專案，每個專案的寬度是50畫素，所以專案總寬度是300畫素。

（3）.容器元素採用flex-wrap: wrap，那麼容器的專案如果寬度過長，那麼就會自動換行。

（4）.程式碼的表現也體現了上述結論，非常簡單。

[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-wrap:wrap-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/123358r0gk66pgia66niwn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼表現解析如下：

（1）.值簡單調整了一下屬性值，佈局發生如此奇妙的變化，從一個側面也體現了彈性佈局的強大。

（2）.將容器flex-wrap屬性值設定為wrap-reverse，那麼專案在需要的時候可以換行，但順序上下顛倒，可以看到原本在第一行的專案，現在出現的在第二行，不要認為專案的排列前後順序顛倒，只是行的位置發生了顛倒。

總體來講，此屬性比較簡單，如果對本文有任何問題或者疑問可以在文章底部留言。

相關文章