一.flex屬性
1.父容器常用屬性六個:
flex-direction:row|row-reverse|column|column-reverse;主軸的方向(專案的排列方向)
flex-wrap:wrap|nowrap|wrap-reverse;換行方式
flex-flow是flex-direction和flex-wrap的結合
justify-content:flex-start|flex-end|center|space-between|space-around;//主軸方向的對齊方式
align-items:flex-start|flex-end|center|basline|stretch;//交叉軸方向的對齊方式
align-content:flex-start|flex-end|center|space-between|space-around|stretch(多個主軸的排序方式)
2.子容器(子專案)常用屬性六個:
order:<integer>;數值越排序越靠前
align-self:auto | flex-start | flex-end | center | baseline | stretch;允許單個專案和整體專案不一樣的對齊方式
flex-group:<number>;預設值是0,即存在剩餘空間也不放大;如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果一個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍。
flex-shrink:<number>;預設值是1,如果該專案空間不足,將等比例縮小;如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
flex-basis:<length> | auto; / default auto /剩餘空間沒分配前,子專案佔據的主軸空間。
flex是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值是0,1，auto;
flex:1;指flex-grow:1;flex-shrink:1;flex-basis:auto;