容器屬性
容器支持的屬性有：
display：通過設置display屬性，指定元素是否為Flex布局。
flex-direction：指定主軸方向，決定了項目的排列方式。
flex-wrap：排列換行設置。
flex-flow:flex-direction和flex-wrap的簡寫形式。
justify-content：定義項目在主軸上的對齊方式。
align-items：定義項目在交叉軸上的對齊方式。
align-content：定義多根軸線的對齊方式，如果只有一根軸線，該屬性不起作用。
1．display
display用來指定該元素是否為Flex布局，語法為：
.mybox{ display: flex | inline-flex; }
其屬性值如下：
flex：用於產生塊級Flex布局。
inline-flex：用於產生行內Flex布局，行內容器符合行內元素的特性，同時在容器內又符合Flex布局規范。
設置Flex布局以后，子元素的float、clear和vertical-align屬性將會失效。
2．flex-direction
flex-direction用於指定主軸的方向，即項目排列的方向，語法為：
.mybox{ flex-direction : row | row-reverse | colum | colum-reverse; }
它有4個值
row：主軸為水平方向，起點在左端，默認值。
row-reverse：主軸為水平方向，起點在右端。
colum：主軸為垂直方向，起點在上沿。
colum-reverse：主軸為垂直方向，起點在下沿
3．flex-wrap
默認情況下，項目都排在一條線上，flex-wrap用來指定如果一條軸線排不下，該如何換行。
.mybox{ flex-wrap : nowrap | wrap | wrap-reverse; }
它有3個值
nowrap：不換行，默認值。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
當設置換行時，還需要設置align-item屬性配合實現自動換行，並且align-item的值不能為“stretch”。
4．flex-flow
flex-flow是flex-direction和flex-wrap的簡寫形式，默認值為row nowrap。語法如下：
示例代碼如下： .mybox{ flex-direction : row; }
.mybox{ flex-wrap : nowrap; } /＊和上一句效果一樣 ＊/ .mybox{ flex-flow : row nowrap; }
5．justify-content
justify-content屬性定義了項目在主軸上的對齊方式，語法如下：
.mybox{ justify-content : flex-start | flex-end | center | space-between | space-around; }
justify-content與主軸方向有關，包括以下屬性（默認主軸從左到右)
flex-start：左對齊，默認值。
flex-end：右對齊。
center：居中。
space-between：兩端對齊，項目之間的間隔都相等。
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
6．align-items
align-items指定項目在交叉軸上如何對齊，語法如下：
.mybox{ align-items : flex-start | flex-end | center | baseline | stretch; }
algin-items與交叉軸方向有關，包括以下屬性（假設交叉軸從上到下
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中線對齊。
baseline：項目根據它們第一行文字的基線對齊。
stretch：如果項目未設置高度或設置為auto
7．align-content
align-content用來定義項目多根軸線（出現換行后）在交叉軸上的對齊方式，如果項目只有一根軸線，該屬性不起作用，語法如下：
.mybox{ align-content : flex-start | flex-end | center | space-between | space-around | stretch; }
其屬性值如下
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等，軸線之間的間隔比軸線與邊框間隔大一倍。
stretch：軸線占滿整個交叉軸，每個項目會被拉伸直至填滿交叉軸，默認值。
項目屬性
項目支持的屬性有6個：
order：定義項目的排序順序。
flex-grow：定義項目的放大比例。
flex-shrink：定義項目的縮小比例。
flex-basis：定義在分配多余空間之前，項目占據的主軸空間（main size）。
flex:flex-grow、flex-shrink和flex-basis的簡寫。
align-self：用來設置單獨的伸縮項目在交叉軸上的對齊方式，可覆蓋默認的algin-items屬性。
1．order
order屬性定義項目的排列順序。數值越小，排列越靠前（如圖3-16），默認為0，語法如下：
.myitem{ order : <integer>; }
2．flex-grow
flex-grow定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大，語法如下：
.myitem{ flex-grow : <number>; }
如果所有項目的flex-grow值都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍，整體按比例填充剩余空間
3.flex-shrink
flex-shrink定義了項目的縮小比例，默認為1，如果空間不足，該項目將縮小，語法如下：
.myitem{ flex-shrink : <number>; }
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小，負值對該屬性無效。
這里我們舉個例子，如一個容器寬200px，里面有4個項目，它們的寬度都為60px，那么整體寬度就是4×60=240px，比容器多了40px，如果這4個項目的flex-shrink值分別為1、2、1、3，那么它們的寬度分別按比例減少40px × 1 / (1+2+1+4) = 5px、40px × 2 / (1+2+1+4) = 10px、40px × 1 /(1+2+1+4) = 5px、40px × 4 / (1+2+1+4) = 20px，縮小后它們的寬度分別為：55px、50px、55px、40px。
4.flex-basis
flex-basis屬性用來定義伸縮項目的基准值，剩余的空間將按比例進行縮放。它的默認值為auto，即項目的本來大小，語法如下：
.myitem{ flex-basis : <length> | auto; } 它可以設為跟width或height屬性一樣的固定值，如320px，這樣項目將占據固定空間。
5．flex
flex屬性是flex-grow、flex-shrink和flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選，語法如下：
.myitem{ none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
該屬性有兩個快捷值：auto（1 1 auto）和none（0 0 auto）。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
示例代碼如下：
.myitem{ flex: 1 1 auto }
.myitem{ flex : auto; }
/＊ 同上句 ＊/
.myitem{ flex: 0 0 auto }
.myitem{ flex : none; }
/＊ 同上句 ＊/
.myitem{ flex : 1 auto; }
.myitem{ flex : 1 1; }
6．align-self
align-self用來設置單獨的伸縮項目在交叉軸上的對齊方式，該屬性會復寫默認的對齊方式，語法如下：
.myitem{ align-self : auto | flex-start | flex-end | center | baseline | stretch; }
該屬性6個值除了auto，其余和容器align-items屬性完全一致：
auto：表示繼承容器align-items屬性，如果沒有父元素，則等同於stretch，默認值。
flex-start：交叉軸的起點對齊
flex-end：交叉軸的終點對齊。
center：交叉軸的中線對齊。
baseline：項目根據它們第一行文字的基線對齊。
stretch：如果項目未設置高度或設置為auto，項目將在交叉軸方向拉伸填充整個容器，默認值。
