flex佈局

lex佈局

參考了兩個前端大牛介紹的flex佈局的博客

1. http://www.javashuo.com/article/p-pbszeqvm-h.html
2. http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

下面是看完博客本身的整理

1．  什麼是flex

Flex 是 flexible box的簡寫，意思是彈性佈局，任何一個元素均可以被設置爲flex佈局

行內元素

.box{

    display: inline-flex;

}

塊級元素

.box{

    display: flex;

}

Webkit內核的瀏覽器，必須加上-webkit前綴

.box{

    display: -webkit-flex;   /*Safari*/

    display: flex;

}

注意：設置爲flex佈局後，子元素的float clear 和vertical-align屬性將失效

2．  Flex的基本概念

flex 的核心的概念就是 容器 和 軸。容器包括外層的 父容器 和內層的 子容器，軸包括 主軸 和 交叉軸

水平方向的軸是主軸（main axis），豎直方向的軸是交叉軸（cross axis）

本身簡單的畫了一個關係圖

借用博客上的關於邊框的圖片

主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。

項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size

3．  基本屬性

 附上做者畫的清晰強大的腦圖，依次理解一下flex的屬性

父容器的屬性

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

1.flex-direction 決定主軸的排列方式，即子容器的排列方向

（1）flex-direction:row  默認值，主軸爲水平，起點在左側

                                                                                  

（2）flex-direction:row-reverse  主軸爲水平，起點在右側

                                                                                     

（3）flex-direction:column  主軸爲垂直，起點在上

                                                                       

（4）flex-direction:column-reverse  主軸爲垂直，起點在下方

                                                                       

2.flex-wrap 設置水平排列的子元素換行的處理

（1）nowrap 默認不換行 

       

（2）wrap 換行，第一行在上面

      

（3）wrap-reverse  換行，第一行在下方

       

3.flex-flow

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

4.justify-content  定義了子容器在主軸上的對齊方式

（1）justify-content：flex-start  默認值 左對齊

      

（2）justify-content：flex-end  右對齊

     

（3）justify-content：center 居中

    

（4）justify-content：space-between 兩端對齊，子容器的間距都相同

   

（5）justify-content：space-around 每一個子容器兩端的間距都相同

   

5.align-items定義子容器在交叉軸上的對齊方式

（1）align-items:flex-start  與交叉軸的起點對齊

                                           

（2）align-items:flex-end 與交叉軸的終點對齊

                                           

（3）align-items:center  與交叉軸的中點對齊

                                           

（4）align-items:baseline  子容器的第一行文字的基線對齊

                                           

（5）align-items:stretch  若是子容器未設置高度或設置爲auto，將佔滿整個容器的高度

                                          

6.align-content 定義了多根軸線的對齊方式，若是子容器只有一根軸線，改屬性不起做用

（1）align-content：flex-start  與交叉軸的起點對齊

                                          

（2）align-content：flex-end 與交叉軸的終點對齊

                                          

（3）align-content：center 與交叉軸的中點對齊

                                          

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

                                          

（5）align-content：space-around 每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍

                                          

（6）align-content：stretch 軸線佔滿整個交叉軸

                                           

 子容器屬性

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

1.order 定義子元素的排列順序，數值越小，排位越靠前，默認爲0

   

2.flew-grow 定義子元素的放大比例，默認爲0，即若是存在剩餘空間，也不放大

   若是全部子元素的flex-grow都是1，則他們將等分剩餘空間，若是一個子元素的flex-grow屬性爲2，其餘子元素的都是1，前者佔據的剩餘空間比其餘項多一倍。

   

3.flex-shrink 定義了子元素的縮小比例，默認爲1，若是空間不足，項目將縮小

若是全部的flex-shrink都設置爲1，當空間不足時，會等比例縮小，若是一個項目的flex-shhrink爲0，其餘的都爲1，當空間不足時，前者不縮小

4.flex-basis屬性 定義了再分配多餘空間以前，項目佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間，默認值爲auto，即項目的原本大小

 能夠像寬高同樣將它設置爲固定值，那麼它會佔據固定的空間

5 flex屬性是flex-grow  flex-shrink 和flex-basis的簡寫 默認值是 1 auto 

  該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

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

6.align-self屬性容許單個子元素有與其餘子元素不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於 stretch

該屬性能夠取6個值，除了auto，其餘都與align-items屬性徹底一致