Flex 佈局——語法屬性詳解

前言

Flexbox 是 flexible box 的簡稱（注：意思是「靈活的盒子容器」），是 CSS3 引入的新的佈局模式。它決定了元素如何在頁面上排列，使它們能在不一樣的屏幕尺寸和設備下可預測地展示出來。

它之因此被稱爲 Flexbox ，是由於它可以擴展和收縮 flex 容器內的元素，以最大限度地填充可用空間。與之前佈局方式（如 table 佈局和浮動元素內嵌塊元素）相比，Flexbox 是一個更強大的方式：

自從用習慣flex佈局我基本已經不怎麼使用float了。

flex屬性繁多，但能夠分爲倆類：父容器的屬性和子項的屬性，全部的屬性值幾乎都和排列、對齊、佔地面積3類特性相關。

1.父容器屬性

	用於父元素的樣式	值	做用	特性分類
1	flex-direction	row、row-reverse、column、column-reverse	定義子項在容器內的排列方向	排列
2	flex-wrap	nowrap、wrap、wrap-reverse	定義子項在容器內的換行結果	排列
3	flex-flow	flex-flow是flex-direction和flex-wrap屬性的簡寫形式，默認值爲row nowrap	flex-flow是flex-direction和flex-wrap屬性的簡寫形式，默認值爲row nowrap	排列
4	justify-content	flex-start、center、flex-end、space-between、space-around	定義子項在容器內水平對齊方式	對齊
5	align-items	flex-start、center、flex-end、baseline、stretch	定義子項在容器內的垂直對齊方式	對齊
6	align-content	flex-start、center、flex-end、space-between、space-around、stretch	定義多行子項在容器內總體垂直對齊方式	對齊

2.子項屬性

用於子元素的樣式	值	做用	特性分類
order	需整數integer	屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0	排列
flex-grow	<number>	屬性定義子項寬度之和不足父元素寬度時，子項拉伸的比例，無需直接設置寬度	佔地面積
flex-shrink	<number>	屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。負值對該屬性無效	佔地面積
flex-basis	number或百分比	屬性定義了在分配多餘空間以前，項目佔據的主軸空間它的默認值爲auto，負值對該屬性無效	佔地面積
flex	默認值爲0 1 auto，後兩個屬性可選	是flex-grow, flex-shrink 和 flex-basis的簡寫	佔地面積
align-self	flex-start、center、flex-end、baseline、stretch	屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch	對齊

3.父容器屬性詳解使用

   3.1flex-direction屬性

　　　　   定義子項在容器內的排列方向

　　　 flex-direction: row | row-reverse | column | column-reverse;

　　　　

 3.2 flex-wrap屬性

　　　　定義子項在容器內的換行效果

　　　　　　 

 　　　flex-wrap: nowrap | wrap | wrap-reverse;

　　　　

3.3 flex-flow屬性

 　　　　flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式

　　　　 flex-flow: <flex-direction> || <flex-wrap>;

　　　　參考以上倆個屬性的寫法，這裏就此省略過了......

3.4 justify-content屬性

　　　　定義子項在容器內水平對齊方式

　　　　 justify-content: flex-start | flex-end | center | space-between | space-around; 

              

3.5 align-items屬性

　　　　 定義子項在容器內垂直對齊方式

　　　　align-items: flex-start | flex-end | center | baseline | stretch; 

　　　　

tip：baseline: 項目的第一行文字的基線對齊。

3.6 align-content屬性

　　　　定義多行子項在容器內總體垂直對齊方式，經常使用於多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

　　　　 align-content: flex-start | flex-end | center | space-between | space-around | stretch; 

　　　　

3.子項屬性詳解使用

　　4.1 Order屬性

　　　　定義排列順序，數值小的排在前面。

　　　　 order:<integer>  　　/* 傳入整數，default 0 */

　　　　

　　4.2 flex-grow屬性

　　　　定義子項寬度之和不足父元素寬度時，子項拉伸的比例

　　　　flex-grow: <number>  　　/*傳入數字，default 0 */


　　　    

　　若是全部項目的flex-grow屬性都爲1，則它們將等分父元素設置的空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

　4.3 flex-shrink屬性

　　　　定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小，定義子項寬度之和超過父元素寬度時，子項縮放的比例。

　　　　flex-shrink：<number> 　　/*default 1 */

　　　　

　　說明：

　　flex-shrink的默認值爲1，瀏覽器將超出的空間，按照收縮因子相加以後計算比率來進行空間收縮。

　　圖例中4定義了flex-shrink:2，其他子項定義了flex-shrink:1，這樣能夠看到總共將剩餘空間分紅了6份，4個1份，1個2份，即1:1:1:2:1。

　　假設咱們給父容器width定義爲800px，每一個子項的width被定義爲250px，5個子項相加以後即爲1250px，超出父容器450px。那麼這麼超出的450px須要被這5個子項消化。

　　按照收縮因子，加權綜合可得250*1+250*1+250*1+250*2+250*1=1500px；

　　因而咱們能夠計算子項將被移除的溢出量是多少：

　　收縮因子爲1的，被移除溢出量：(250*1/1500)*450，即等於75px。

　　收縮因子爲2的，被移除溢出量：(250*2/1500)*450，即約等於150px。

　　最後實際寬度分別爲：250-75=175px, 250-150=100px，四個flex-shrink 1等於700px，一個flex-shrink 2等於100px。

   4.4 flex-basis屬性

　　　　定義子項的初始寬度，若子項寬度之和超過父元素寬度時，子項按照flex-basis的比例縮放

　　　　flex-basis：<length> | <percentage>;　　/* default auto*/

　　　　

　　說明：　　　　

　　flex-basis的默認值爲auto（無特定寬度值，取決於其它屬性值），瀏覽器將超出的空間，按照各子項basis的值的比例進行空間收縮。

　　圖例中5定義了flex-basis:400px，其他子項定義了flex-basis:200px，假設咱們給父容器width定義爲800px，5個子項相加以後即爲1200px，超出父容器400px。那麼這麼超出的400px須要被這5個子項消化。

　　這5個子項的比例爲1:1:1:1:2，則多出來的400px要被分爲6份，因而咱們能夠計算子項將被移除的溢出量是多少：

　　flex-basis爲400px的，被移除溢出量：400/6*2，即約等於133.33px。

　　flex-basis爲200px的，被移除溢出量：400/6*1，即約等於66.67px。

　　最後實際寬度分別爲：400-133.33=266.67px, 200-66.67=133.33px，前四個都是133.33px，最後一個是266.67px。

  4.5 flex屬性

　　flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

　　flex:none | <flex-grow>  <flex-shrink>  <flex-basis>

  4.6 align-self屬性

　　定義單個子項與其餘項目不同的對齊方式

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

　　align-self: auto | flex-start | flex-end | center | baseline | stretch;　　/*該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。*/ 

　　   

　　圖例中父容器設置了align-items:flex-start，而後咱們單獨給5設置了align-self:flex-end。

如須要更深刻了解flex佈局，請參考阮一峯博文——Flex 佈局教程：實例篇