## ## 外層container屬性： * display后，子元素vertical-align,float,clear失效 ~~~ display:flex; display:-webkit-flex; ~~~ * 容器屬性： 1. 主軸item排列方向：默認左右，右左，上下，下上 `flex-direction:row | row-reverse | column | column-reverse` 1. 換行：默認不換行，換行，換行同時第一排在下面 ` flex-wrap:nowrap | wrap | wrap-reverse` **以上2個的簡寫合并為flex-flow** ~~~ flex-flow:row nowrap ~~~ * 主軸上item對齊方式 默認左對齊，右對齊，居中，兩端對齊，每個項目2邊間距相等（margin: x 0） `justify-content:flex-star | flex-end | center | space-between | space-around` * 交叉軸上的對齊方式（項目元素的高度） 起點對齊，終點對齊，中點對齊，項目第一行文字的基線對齊，默認高度占滿容器（如果未設置高度） `align-items:flex-start | flex-end | baseline | strech` * 多根軸線的對齊方式 align-content ## item屬性： * 給子元素設置順序，越小越靠前，默認都為0 `order:整數` * 放大倍數，如果都為1則平分空間，如果有一個為2，則是其他的2倍，默認都為0（即使有剩余空間，也不分配） `flex-grow:整數` * 縮小倍數，默認都為1，即平分空間，自動縮小；為0的不縮小，其他的縮小 `flex-shrink：整數` * 項目尺寸（主軸尺寸），等同于width,height，默認auto,項目本來尺寸 `flex-basis：300px` **以上flex-grow,flex-shrink,flex-basis 3個簡寫為flex** ~~~ flex:0 1 auto; //默認值 flex:auto //等同于：1 1 auto flex:none //等同于:0 0 auto ~~~ * 單獨樣式 align-self