關於Flex，有12個屬性非常重要

這幾天在學習Flex布局，發現Flex真的好厲害！

Flex是Flexible Box的縮寫，意為“彈性布局”，用來為盒模型提供最大的靈活性。

Flex是它能夠簡單、完整、響應式的實現各種網頁布局，眼下已經得到了大多數主流瀏覽器的支持，有關於它的兼容性能夠在CanIuse中的查詢到：

不論什麽一個容器都能夠指定為Flex布局

.box {
    display: flex;
}
.box {
    display: inline-flex;  // 行內元素通過這樣的方式指定為Flex布局
}
.box {
    display
 
: -webkit-flex  // Webkit內核瀏覽器使用此方式指定為Flex布局
}

這篇文章是我對Flex的總結。文章中的內容主要借鑒自Flex布局教程 by阮一峰、flex布局 by饑人谷方方老師。

基本概念

• flex container：採用Flex布局的元素，即父元素，稱為Flex容器，簡稱容器。

• flex item：父元素內包括的子元素，稱為Flex項目，簡稱項目。
• Flex是沒有方向之分的，在Flex容器中默認存在兩根軸，水平的軸為 主軸main axis，垂直的軸為 側軸cross axis。

  （假設改變flex-direction，主軸和側軸也將會改變）

• 主軸的開始位置（與邊框的交叉點）叫做 main start
  。結束位置叫做 main end 。
• 側軸的開始位置叫做 cross start ， 結束位置叫做 cross end 。
• 項目默認沿主軸方向排列，單個項目占領的主軸空間叫做 main size 。側軸空間叫做 cross size 。

以上概念能夠用下圖全部展現：

註意：設為Flex布局後，子元素的float、clear、vertical-align屬性將失效。

容器（父元素）的屬性

容器共同擁有六個屬性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction屬性

flex-direction屬性決定主軸的方向，它可能有四個值。

• row：默認值。主軸為水平方向。起點在左端。

• row-reverse：主軸為水平方向，起點在右端。

• column：主軸為垂直方向。起點在上端。
• column-reverse：主軸為垂直方向，起點在下端。

四種值相應的情況例如以下圖所看到的：

flex-wrap屬性

flex-wrap屬性決定項目在一行排不下的情況下是否換行。它可能有三種值。

• nowrap：默認值。不換行。
• wrap：換行，第一行在主軸開始方向。依次往主軸結束方向布置。
• wrap-reverse：換行，第一行在主軸結束方向，依次往主軸結束方向布置

三種值相應的情況例如以下圖所看到的：

flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式，它可能有五個值。

• flex-start：默認值，主軸開始方向對齊。

• flex-end：主軸結束方向對齊。
• center：主軸居中對齊。
• space-between：兩端對齊，項目之間間隔都相等。
• space-around：每一個項目兩側的間隔相等，所以項目之間間隔是項目與邊框間隔的兩倍。
  假設主軸為從左到右。五種值相應的情況例如以下圖所看到的：

align-items屬性

align-items屬性定義了每行項目在側軸方向上的對齊方式，它也可能有五個值。
- flex-start：側軸開始方向對齊。
- flex-end：側軸結束方向對齊。
- center：側軸居中對齊。
- baseline：項目第一行文字的基線對齊
- stretch：默認值，假設項目未設置高度或高度設為auto，將占滿整個容器。

假設側軸為從上到下。五種值相應的情況例如以下圖所看到的：

align-content屬性

align-content屬性定義了容器在側軸方向上有額外空間時。怎樣每排布一行，當容器僅僅有一行時。它不起作用。它可能有六個值。

• flex-start：側軸開始方向對齊。
• flex-end：側軸結束方向對齊。

• center：側軸中心中對齊。
• space-between：與側軸兩端對齊，每行軸線間隔平均。

• space-around：每根軸線兩側間隔相等。
• stretch：默認值。占滿整個整個側軸

假設側軸為從上到下。六種值相應的情況例如以下圖所看到的：

項目（子元素的屬性）

項目共同擁有六個屬性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order屬性

order屬性定義項目的排列順序。數值越小排列越靠前，默覺得0，可能的值為隨意整數。

flex-grow屬性

flex-grow屬性定義項目的放大比例，默覺得0，即假設存在剩余空間也不放大。

假設全部項目的flex-grow屬性都為1，則它們將等分剩余空間（假設有的話）。假設一個項目的flex-grow屬性為2，其它項目都為1，則前者占領的剩余空間將比其它項多一倍。例如以下圖所看到的：

flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默覺得1。即假設空間不足該項目將縮小。

負值對該屬性無效,即該屬性可能的值為0或正整數。

假設全部項目的flex-shrink屬性都為1。當空間不足時，都將等比例縮小。

假設一個項目的flex-shrink屬性為0，其它項目都為1。則空間不足時。前者不縮小。例如以下圖所看到的：

flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項目占領的主軸空間（main-size）。

瀏覽器依據整個屬性。計算主軸是否有多余空間。

它的默認值為auto。即項目的本來大小。

它能夠設為跟width或height屬性一樣的值（比方350px）。則項目將占領固定空間。

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。

後兩個屬性可選。

該屬性有兩個快捷值：auto (1 1 auto)（既能夠放大占滿空間。也可縮小） 和 none (0 0 auto)（不可放大，也不可縮小）。

建議優先使用這個屬性。而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

align-self屬性

align-self屬性同意單個項目有與其它項目不一樣的側軸對齊方式，可覆蓋align-items屬性。

默認值為auto，表示繼承父元素的align-items屬性。假設沒有父元素，則等同於stretch。

其值除auto外。其它與align-items全然一致。

總結

僅僅要記住了這12個屬性，使用Flex布局就肯定沒問題啦，在我的GitHub上有幾個關於Flex布局的小樣例，想復習的朋友能夠去試一試，倉庫地址在這裏。

(完)

關於flex，好像有12個屬性非常重要