前幾天寫過怪異盒子布局，以前在項目中用到彈性布局flex這個屬性，當時沒深入研究，這里各種查閱各種測試，把這個屬性記錄下 以免忘記，
彈性布局：是提供一種更加有效的方式來對一個容器中的條目進行排列、對齊和分配空白空間。即便容器中條目的尺寸未知或是動態變化的，彈性盒布局模型也能正常的工作。
讓一個盒子具有彈性布局的屬性，要先給其加上樣式display:flex；OK我們也會看到有寫的是display:box/display:flexbox；其實他們只是不同時期的規范：
- 新規范：2013年最新版本規范的語法 即display:flex/inline-flex;
- 中間版本：2011年非官方規范的語法 即display:flexbox/inline-flexbox;
- 老規范：2009年規范的語法 即display:box/inline-/box;
帶inline-的容器渲染為行內元素，沒帶的為塊級元素
可以看到flex近幾年幾種不同的寫法，相應的也帶來很多兼容性問題，所以在開發過程中我們要兼顧所有版本,下面是瀏覽器版本的分界
Chrome：21+（新）20-（老） Safari： 6.1+（新）3.1+（老） Firefox：22+（新）2-21（老） IE：10（中間） Android: 4.4+（新）2.1+（老） iOS: 7.1+（新) 3.2+（老）
Chrome當前版本仍然需要添加前綴“-webkit-”，而Firefox和Safari仍然還在使用最老版本的語法。Firefox已經更新為最新的規范，但是，在實際項目中目前最好還先別使用最新的規范，直到它被認為沒有bug了或者更穩定了，在使用。在這之前，Firefox還是使用最老的語法規范。ie10支持-ms-的寫法，（手機瀏覽器兼容這個還需要時間去測） 先定義父容器flex盒子並兼容寫法
display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ display: -webkit-flex; /* 新版本 語法： Chrome 21+ */ display: flex; /* 新版本語法： Opera 12.1, Firefox 22+ */
一個flexbox布局是由一個伸縮容器（flex container）和伸縮項目(flex items)組成，在伸縮容器中 所有的子元素都會變成伸縮項目，如圖
好的 父容器盒子定義為伸縮容器后，里面的伸縮項目會隨父容器中所加的樣式或自身樣式來進行如定義所說排列、對齊和分配空白空間
一，這6個屬性是加在父容器上的
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direcotion
flex-direction：row | row-reverse | column | column-reverse
默認值：row
適用於：伸縮盒容器
繼承性：無
row：橫向從左到右排列（左對齊），默認的排列方式。
row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
column：縱向排列。
row-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。
flex-wrap
flex-wrap：nowrap | wrap | wrap-reverse
默認值：nowrap
適用於：彈性盒模型容器
繼承性：無
nowrap：當子元素溢出父容器時不換行。wrap：當子元素溢出父容器時自動換行。wrap-reverse：反轉 wrap 排列。
flex-flow
flex-flow：[ flex-direction ] || [ flex-wrap ]
默認值：看各分拆屬性
適用於：彈性盒模型容器
繼承性：無
[ flex-direction ]：定義彈性盒子元素的排列方向。[ flex-wrap ]：定義彈性盒子元素溢出父容器時是否換行。
justify-content
justify-content：flex-start | flex-end | center | space-between | space-around
默認值：flex-start
適用於：彈性盒模型容器
繼承性：無
flex-start：彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊，同時所有后續的伸縮盒項目與其前一個項目對齊。
flex-end：彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊，同時所有后續的伸縮盒項目與其前一個項目對齊。
center：彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊，同時第一個元素與行的主起始位置的邊距等同與最后一個元素與行的主結束位置的邊距（如果剩余空間是負數，則保持兩端相等長度的溢出）。
space-between：彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。
space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它情況下，伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
align-items
align-items：flex-start | flex-end | center | baseline | stretch
默認值：stretch
適用於：彈性盒模型容器
繼承性：無
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
align-content
align-content：flex-start | flex-end | center | space-between | space-around | stretch
默認值：stretch
適用於：多行的彈性盒模型容器
繼承性：無
flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之后的每一行都緊靠住前面一行。
flex-end：各行向彈性盒容器的結束位置堆疊。彈性盒容器中最后一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之后的每一行都緊靠住前面一行。
center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最后一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）
space-between：各行在彈性盒容器中平均分布。如果剩余的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最后一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。
space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最后一行后面的空間是其他空間的一半。
stretch：各行將會伸展以占用剩余的空間。如果剩余的空間是負數，該值等效於'flex-start'。在其它情況下，剩余空間被所有行平分，以擴大它們的側軸尺寸。
更多測試實例 點擊進入
二，這6個屬性是加在項目上的
order flex-grow flex-shrink flex-basis flex align-self
order
取值：用整數值來定義排列順序，數值小的排在前面。可以為負值。
flex-grow
flex-grow：<number>
默認值：0
適用於：彈性盒模型容器子元素
繼承性：無
取值：用數值來定義擴展比率。不允許負值，默認值為0；
flex-shrink
取值：用數值來定義收縮比率。不允許負值，默認值為1；
flex-basis
flex-basis：<length> | <percentage> | auto
默認值：auto
適用於：彈性盒模型容器子元素
繼承性：無
- auto：無特定寬度值，取決於其它屬性值
- <length>：用長度值來定義寬度。不允許負值
- <percentage>：用百分比來定義寬度。不允許負值
-
- flex
flex：none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
默認值：看各分拆屬性
適用於：彈性盒模型子元素
繼承性：無
none：none關鍵字的計算值為: 0 0 auto
[ flex-grow ]：定義彈性盒子元素的擴展比率。
[ flex-shrink ]：定義彈性盒子元素的收縮比率。
[ flex-basis ]：定義彈性盒子元素的默認基准值。
algin-self
align-self：auto | flex-start | flex-end | center | baseline | stretch
默認值：auto
適用於：彈性盒模型子元素
繼承性：無
auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
更多測試實例 點擊進入