Flex佈局

首先要有個容器，並設置display:flex;display:-webkit-flex;該容器有以下六個屬性：

1 2 3 4 5 6 7 8 9 10 11 12

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

項目的屬性：

1 2 3 4 5 6 7 8 9 10 11

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

1 2 3 4

row (從左往右)默認 row-reverse (從右往左) column (從上往下) column-reverse (從下往上)

2.flex-wrap

1 2 3

nowrap (不換行)默認 wrap (換行，且往下一行換) wrap-reverse (換行，且往上一行換)

 

3.flex-flow，是flex-direction和flex-wrap的簡寫形式。

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

4.justify-content

1 2 3 4 5

flex-start flex-end center space-between space-around

5.align-items

1 2 3 4 5

stretch 默認 flex-start flex-end center baseline 項目第一行文字的基準線對齊

　　

6.align-content

1 2 3 4 5 6

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，定義項目自己的對齊方式