display:flex 彈性佈局

admin發表於2019-03-25
Flex

彈性佈局在CSS3中是非常重要的概念，當然這取決於它的便利性。

雖然在電腦端存在著很大的相容性問題，但是隨著時間的推移，軟硬體的升級，肯定會得到廣泛應用。

本文將通過程式碼例項結合圖示詳細介紹一下display:flex的用法，希望能夠給需要的朋友來一些幫助。

首先說明一點，下文中使用的圖片大多數來源於如下兩個連結地址，再這裡首先表示一下感謝。

（1）.A Complete Guide to Flexbox。

（2）.A Visual Guide to CSS3 Flexbox Properties。

建議英文好的朋友直接閱讀如上兩篇文章，並且對應站點中的前端知識非常優秀。

一.彈性佈局的影響：

彈性佈局之所以功能強大靈活，是因為它打破了很多原有的規則。

可以將任意元素設定為彈性佈局，彈性佈局會對其內部的子元素產生影響：

（1）.塊級元素不再單獨佔據一行。

（2）.如果塊級元素沒有顯式規定寬度，也不會橫向鋪滿父元素。

（3）.float、clear和vertical-align屬性會失效。

正是因為打破一些原有的規則，所以彈性佈局會在一些場景下非常的靈活強大。

首先看一段程式碼例項，對彈性佈局有一個初步的感受：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#box {
  display:flex;
  width:300px;
  height:100px;
  justify-content:space-between;
  align-items:center;
  background:#ccc;
}
#box > span {
  border-radius:50px;
  background:green;
  width:50px;
  height:50px;
}
</style>
</head>
<body>
<div id="box">
  <span></span>
  <span></span>
</div>
</body>
</html>

上面是一個彈性佈局的簡單例子，程式碼執行效果截圖如下：

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

對於上述程式碼的表現不做詳細分析，強調如下兩點：

（1）.display: flex可以將當前元素設定為彈性佈局的容器元素。

（2）.也可以設定為display: inline-flex，兩者區別參閱display:flex與inline-flex 區別一章節。

二.彈性佈局概念：

將display屬性值設定為flex或者inline-flex的元素被稱之為flex容器，或者簡稱為容器元素。

容器元素的子元素被稱之為flex專案，或者簡稱專案。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215111ga36aa2ab32m527a.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

圖示簡單分析如下：

（1）.黃色為容器元素，白色為專案。

（2）.容器預設存在水平主軸和垂直交叉軸兩根軸線。

（3）.主軸開始的位置叫做main start，結束的位置叫做main end。

（4）.交叉軸開始的位置叫做cross start，結束的位置叫做cross end。

（5）.專案預設是沿著主軸水平排列。

（6）.每一個專案在主軸佔據的空間叫做main size，交叉軸佔據的空間叫做cross size。

在預設狀態下，主軸是水平的，當然這不是一成不變的，可以通過相關設定改變，在後面文章會介紹。

三.容器屬性：

將元素設定為容器之後，可以通過六個屬性對其進行相關設定。

也就是說這六個屬性對容器元素生效，考慮到篇幅問題，下面只對相關屬性做簡單介紹。

它們詳細的用法，可以參閱介紹後面對應的相關文章。

1.flex-direction：

此屬性非常容易理解，從名稱就可以猜測，它用於與方向相關的設定。

它可以設定容器主軸的方向，也就是專案預設的排列方向。

語法結構如下：

[CSS] 純文字檢視 複製程式碼
#box {
  flex-direction: row | row-reverse | column | column-reverse;
}

引數解析：

（1）.row：預設值，預設主軸是水平的，並且左側為main start，也就是起始位置。

（2）.row-reverse：與row類似，主軸是水平的，但是方向相反，也就是右側為main start。

（3）.column：主軸為垂直方向，上側為main start。

（4）.column-reverse：主軸為垂直方向，下側為main start。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215210ltgdygvmacdn0gae.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於此屬性更多內容可以參閱CSS3 flex-direction一章節。

2.flex-wrap：

屬性名稱中包括單詞"wrap"，那麼會聯想到此屬性功能與換行相關，比如overflow-wrap屬性。

事實也是如此，此屬性規定如果專案在軸線上排列不開，以何種方式換行。

語法結構如下：

[CSS] 純文字檢視 複製程式碼
#box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

引數解析如下：

（1）nowrap：預設值，不進行換行，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215258nyq79m4kr711r1cc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（2）.wrap：如果排列不開會自動換行，換行方式預設，自動轉到下一行，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215322wjtrjjjjpvxfw0f8.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（3）.wrap-reverse：很容易猜測，這個順序是反的，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215344c6s64mzaya617pca.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於此屬性更多內容可以參閱CSS3 flex-wrap一章節。

3.flex-flow屬性：

如果明白了上面兩個屬性的功能，那也就等同於明白此屬性的功能。

因為此屬性就是上面兩個屬性的簡寫形式，可以認為是一個複合屬性。

預設屬性值是row nowrap。

語法結構：

[CSS] 純文字檢視 複製程式碼
#box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

掌握flex-direction和flex-wrap屬性也就等同掌握了flex-flow屬性。

更多關於此屬性內容可以CSS3 flex-flow一章節。

4.justify-content屬性：

此屬性規定專案在主軸上的對齊方式。

語法結構：

[CSS] 純文字檢視 複製程式碼
#box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

引數解析如下：

（1）.flex-start：預設值，規定專案從主軸的main start位置開始排列。

（2）.flex-end：規定專案從主軸的main end位置開始排列。

（3）.center ：規定專案在主軸上居中排列。

（4）.space-between：規定專案在主軸上兩端對齊，且專案之間間隔均勻。

（5）.space-around：規定專案在主軸方向兩側持有相同的空間，類似於外邊距。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215511o8dbwttn8dpt4g26.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

更多關於此屬性內容可以CSS3 justify-content一章節。

5.align-items屬性:

前面都是介紹專案在主軸上的排列方式，不能厚此薄彼。

此屬性規定專案在交叉軸上的排列方式。

語法結構：

[CSS] 純文字檢視 複製程式碼
#box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}


引數解析：

（1）.flex-start：規定從交叉軸cross start方向開始排列。

（2）.flex-end：規定從交叉軸cross end方向開始排列。

（3）.center：規定專案在交叉軸中心點對齊。

（4）.baseline：根據專案第一行文字的基線對齊。

（5）.stretch：預設值，如果專案未設定高度或設為auto，將佔滿整個容器的高度。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215700kxoblgtwtggdforh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

關於此屬性的更多內容可以參閱CSS3 align-items一章節。

6.align-content屬性:

此屬性與align-items屬性極為類似，在某些情況兩者表現完全一致。

當然兩者是有區別的，具體參閱align-items與align-content區別一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
#box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

引數解析：

（1）.flex-start：規定從交叉軸cross start方向開始排列。

（2）.flex-end：規定從交叉軸cross end方向開始排列。

（3）.center：規定專案在交叉軸中心點對齊。

（4）.space-between：規定與交叉軸兩端對齊，軸線之間的間隔平均分佈。

（5）.space-around：規定專案在交叉軸方向兩側持有相同的空間，類似於外邊距。

（6）.stretch：預設值，佔滿整個容器的交叉軸的高度。

更多關於此屬性內容參閱CSS3 align-content一章節。

四.應用於專案的屬性：

上面介紹的都是應用於容器的屬性，當然也有應用於專案的屬性。

同樣，我們只通過圖示進行理論闡述，更多內容可以參閱底部對應的文章。

1.order屬性：

order翻譯成漢語具有順序的意思，此屬性確實與專案的排列順序相關。

屬性值是數值型別，數值越小，排列越靠前，就和考試名次一樣，預設值為0。

語法結構：

[CSS] 純文字檢視 複製程式碼
.item {
  order: <integer>;
}

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215827cpaxm8sxwpmzm3hm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

2.flex-grow屬性：

grow翻譯成函式具有增長的意思，此屬性可以定義專案放大的倍數。

預設值為0，也就是不放大，當然放大必須有在父元素有多餘空間的條件下。

語法結構：

[CSS] 純文字檢視 複製程式碼
.item {
  flex-grow: <number>; /* default 0 */
}

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215926iu40pd2dp00dr0hg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果屬性值都為1，那麼大家都平等了，將會平均分配空間，當然前提是父元素還有剩餘的空間可以分配。

關於此屬性的更多內容可以參閱CSS3 flex-grow一章節。

3.flex-shrink屬性：

有放大倍數，自然也有縮小倍數。

此屬性就是用來定義縮小倍數的，預設值為1，如果空間不足則自動縮小。

語法結構：

[CSS] 純文字檢視 複製程式碼
.item {
  flex-shrink: <number>; /* default 1 */
}

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/25/215959mghc1wvhqqf95a8q.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

更多關於此屬性的內容可以參閱CSS3 flex-shrink一章節。

4.剩餘屬性：

感覺文章的篇幅還是有點太長了，還有三個應用於專案的屬性。

本文不再介紹，具體可以參閱如下三篇文章：

（1）.flex-basis屬性參閱CSS3 flex-basis一章節。

（2）.flex屬性參閱CSS3 flex一章節。

（3）.align-self屬性參閱CSS3 align-self一章節。

相關文章