一、flex-direction: （元素排列方向）
※ flex-direction:row （橫向從左到右排列==左對齊）
※ flex-direction:row-reverse （與row 相反）
※ flex-direction:column （從上往下排列==頂對齊）
※ flex-direction:column-reverse （與column 相反）
二、flex-wrap: （內容一行容不下的時候才有效）
※ flex-wrap:nowrap （超出不換行，很奇怪里面的寬度會變成100%）
※ flex-wrap:wrap （超出按父級的高度平分）
※ flex-wrap:wrap-reverse（與wrap 相反）
三、justify-content: （水平對齊方式）
※ flex-start （水平左對齊）
※ justify-content:flex-end; （水平右對齊）
※ justify-content:center; （水平居中對齊）
※ justify-content:space-between; （兩端對齊）
※ justify-content:space-around; （兩端間距對其）
四、align-items: （垂直對齊方式）
※ align-items:stretch; （默認）
※ align-items:flex-start; （上對齊，和默認差不多）
※ align-items:flex-end; （下對齊）
※ align-items:center;（居中對齊）
=※ align-items:baseline; （基線對齊）
如彈性盒子元素的行內軸與側軸（縱軸）為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
flex容器屬性
/*1.方向*/
/*默認方向（row正方向）*/
/* flex-direction: row; */
/*row反方向*/
/* flex-direction: row-reverse; */
/*columnz正方向*/
/*flex-direction: column;*/
/*columnz反方向*/
/*flex-direction: column-reverse;*/
/*2.換行*/
/*flex-wrap: wrap;*/
/*flex-wrap: wrap-reverse;*/
/*3.direction+wrep組合*/
/*flex-flow: row wrap-reverse;*/
/*4.主軸對齊*/
/*起點左對齊*/
/*justify-content: flex-start;*/
/*起點右對齊*/
/*justify-content: flex-end;*/
/*起點居中對齊*/
/*justify-content: center;*/
/*間隔左右分散*/
/*justify-content: space-between;*/
/*間隔內邊距相等*/
/*justify-content: space-around;*/
/*間隔相等*/
/*justify-content: space-evenly;*/
/*5.交叉軸對齊 當flex-direction: row;修飾y軸, 當flex-direction: column;修飾x軸*/
/*默認交叉軸對齊*/
/*align-items: stretch;*/
/*默認交叉軸居中*/
/*align-items: center;*/
/*默認交叉軸上對齊*/
/*align-items: flex-start;*/
/*默認交叉軸下對齊*/
/*align-items: flex-end;*/
/*默認交叉軸內容對齊*/
/*align-items: baseline;*/
/*6.多行交叉軸對齊*/
/*align-content: stretch;*/
/*多行交叉軸居中對齊*/
/*align-content: center;*/
/*多行交叉軸上對齊*/
/*align-content: flex-start;*/
/*多行交叉軸下對齊*/
/*align-content: flex-end;*/
/*多行交叉軸內邊距相等*/
/*align-content: space-around;*/
/*多行交叉軸間隔左右分散*/
/*align-content: space-between;*/
/*多行交叉軸間隔相等*/
/*align-content: space-evenly;*/
flex項目屬性
/*1.控制項目次序*/
/*order: 2;*/
/*2.按比例擴大空間，數越大空間越大，0值不擴大*/
/*flex-grow: 2;*/
/*3.按比例縮小空間，數越大空間越小，0值不壓縮*/
/*flex-shrink: 2;*/
/*4.需要flex-direction配合使用，row=寬 column=高，並且優先級高於width hight, auto值 讓位優先級*/
/*flex-basis: 600px;*/
/*5.flex=grow+shrink+basis*/
/*grow =1 && shrink = 1 && basis = auto*/
/*flex: auto;*/
/*grow =0 && shrink = 1 && basis = auto*/
/*flex: initial;*/
/*grow =0 && shrink = 0 && basis = auto*/
/*flex: none;*/
/*6.align-self覆蓋容器的align-items*/
/*align-self: flex-start;*/