首先要有個容器，並設置display:flex;display:-webkit-flex;該容器有以下六個屬性：
flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (換行)
nowrap, wrap, wrap-reverse
flex-flow (以上兩者的簡寫)
flex-direction || flex-wrap
justify-content (水平對齊方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直對齊方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直對齊方式)
stretch, flex-start, flex-end, center, space-between, space-around
項目的屬性：
order 排列順序，數值，默認0
"integer"
flex-grow 如圖示7，定義放大比例，默認0，即如果存在剩余空間，也不放大。
"number"
flex-shrink 如圖示8，定義縮小比例，默認1，如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
"number"
flex-basis 定義項目占據的主軸空間，默認auto。會根據flex-direction定義的主軸（水平或者垂直），定義項目本來的大小，跟width或者height一樣。
flex 推薦，以上三個的縮寫，默認 0 1 auto
"flex-grow" "flex-shrink" "flex-basis"
align-self 如圖示9，單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items
"auto","flex-start","flex-end","center","baseline","stretch"
1.flex-direction
row (從左往右)默認
row-reverse (從右往左)
column (從上往下)
column-reverse (從下往上)
2.flex-wrap
nowrap (不換行)默認
wrap (換行，且往下一行換)
wrap-reverse (換行，且往上一行換)
3.flex-flow，是flex-direction和flex-wrap的簡寫形式。
flex-flow:<flex-direction> || <flex-wrap>;
4.justify-content
flex-start flex-end center space-between space-around
5.align-items
stretch 默認 flex-start flex-end center baseline 項目第一行文字的基准線對齊
6.align-content
stretch 默認
flex-start
flex-end
center
space-between
space-around
7.flex-grow
定義了放大比例，默認為0，即如果存在剩余空間，也不會放大。但是，如果所有項目的flex-grow屬性為1，則他們將等分剩余空間（如果有的話），如果其中一個為2，則他是其他項目的2倍寬度。
8.flex-shrink
定義了項目的縮小比例，默認為1，即如果空間不足，項目將縮小。如果有一個項目的flex-shrink為0，其他都為1，空間不足時，前者不縮小。
9.align-self，定義項目自己的對齊方式
