定義容器的display屬性
.box{
display: -webkit-flex;
dispaly: flex;
}
/*行內(nèi)樣式*/
.box{
display: -webkit-inline-flex;
display: inline-flex;
}
容器樣式
主軸方向（flex-direction）
| 屬性值 | 屬性的含義 |
|---|---|
| row | 左到右（默認） |
| row-reverse | 右到左 |
| column | 上到下 |
| column-reverse | 下到上 |
換行（flex-wrap）
| 屬性值 | 屬性的含義 |
|---|---|
| nowrap | 不換行（默認） |
| wrap | 換行 |
| wrap-reverse | 換行并第一行在下方 |
主軸方向和換行簡寫
flew-flow:<flex-direction>||<flex-wrap>
主軸對齊方式（justify-content）
| 屬性值 | 屬性的含義 |
|---|---|
| flex-start | 左對齊（默認） |
| flex-end | 右對齊 |
| center | 居中對齊 |
| space-between | 兩端對齊 |
| space-around | 平均分布 |
交叉軸對齊方式（align-items）
| 屬性值 | 屬性的含義 |
|---|---|
| flex-start | 頂部對齊 |
| flex-end | 底部對齊 |
| center | 居中對齊 |
| baseline | 文本基線對齊 |
| stretch | 如果項目未設置高度或設為auto，將占滿整個容器的高度。（默認） |
子元素屬性
排序（order：<number>）：排序，數(shù)值越小，越排前，默認為0
放大（flex-grow: <number>）：放大：默認0（即如果有剩余空間也不放大，值為1則放大，2是1的雙倍大小，以此類推）
縮?。╢lex-shrink:<number>）：縮?。喝绻许椖康膄lex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。
固定大?。╢lex-basis:<length> | auto）:固定大?。耗J為0，可以設置px值，也可以設置百分比大小
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]：flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。
單獨對齊方式（align-self）
| 屬性值 | 含義 |
|---|---|
| auto | 自動（默認） |
| flex-start | 頂部對齊 |
| flex-end | 底部對齊 |
| center | 居中對齊 |
| baseline | 文本基線對齊 |
| stretch | 上下對齊并鋪滿 |
