CSS3中新增一種彈性布局模型：flexbox。網上關於flex的介紹很多，這里介紹下常用的幾個屬性。彈性布局的特點是非常靈活。可根據剩余的寬高，靈活布局。
先用圖片說明flex具有哪些屬性。（網上盜的圖）
上圖中flex容器即是父元素，flex項目為子元素。
屬性說明
1.首先在父元素中定義display:flex;
2.flex-direction:屬性用來控制伸縮容器中主軸的方向，同時也決定了伸縮項目子元素的方向。
flex-direction：row | row-reverse | column | column-reverse
- row 橫向從左到右排列（左對齊）
- row-reverse 橫向從右到左排列（右對齊）
- column 縱向從上到下排列（頂對齊）
- column-reverse 縱向從下到上排列（底對齊）
效果如下:
3. justify-content: 設置子元素在橫軸上的對齊方式。
justify-content：flex-start | flex-end | center | space-between | space-around
- flex-start 彈性盒子元素將向行起始位置對齊。
- flex-end 彈性盒子子元素向行結束位置對齊。
- center 彈性盒子子元素水平居中對齊。
- space-between 彈性盒子元素會平均地分布在行里。如果最左邊的剩余空間是負數，或該行只有一個子元素，則該值等效於'flex-start'。在其它情況下，第一個元素的邊界與行的主起始位置的邊界對齊，同時最后一個元素的邊界與行的主結束位置的邊距對齊，而剩余的伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等。
- space-around 彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數，或該行只有一個伸縮盒項目，則該值等效於'center'。在其它情況下，伸縮盒項目則平均分布，並確保兩兩之間的空白空間相等，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半。
效果如下：
4. align-items：定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
align-items：flex-start | flex-end | center | baseline | stretch
- flex-start 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的縱軸起始邊界。
- flex-end 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
- center 彈性盒子子元素垂直對齊。
- baseline 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
- stretch 如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。
效果如下：
5. align-content：當伸縮容器的側軸還有多余空間時，本屬性可以用來調准「伸縮行」在伸縮容器里的對齊方式，這與調准伸縮項目在主軸上對齊方式的 <' justify-content '> 屬性類似。
align-content：flex-start | flex-end | center | space-between | space-around | stretch
效果同justify-content屬性。
6.flex-wrap：該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
flex-wrap：nowrap | wrap | wrap-reverse
- nowrap 強制不換行
- wrap 正常排列，換行
- wrap-reverse 正常反向排列，換行
參考：
http://web.jobbole.com/86488/
https://bocoup.com/weblog/dive-into-flexbox
http://www.css88.com/book/css/properties/flex/flex-wrap.htm