flex是一個復合屬性，所以有三個值設置，這也就造成了flex可以只設置一個值或兩個值：

如果flex只設置一個值：

• 沒有單位的數，則這個值是flex-grow， 並且flex-basis變為0
• 有單位的數，比如px或em，則這個值是flex-basis
• 關鍵字，auto或者none或者content，則三個值都有各自相應變化

如果flex只設置兩個值，則第一個值必須是沒有單位的數，並且會被解釋為flex-grow，對於第二個值：

• 沒有單位的數，則這個值是flex-shrink， 並且flex-basis變為0
• 有單位的數，比如px或em，則這個值是flex-basis

根據上面的規則就很容易知道下面的四種快捷取值：

/* flex: 1 1 0; */
flex: 1;   
/* item會被放大或縮小至充滿父容器，如果所有的item的flex都被設置為1，
   則無視item的原來在主軸上的長度，而統一被設置為相等 */

 /* flex: 1 1 auto; */
flex: auto; 
/* item會被放大或縮小至充滿父容器，如果所有的item的flex都被設置為auto，
   則根據item的原來在主軸上的長度，按比例放大，但縮小相同的長度，
   這是由於flex-grow和flex-shrink的計算方式不同導致，不在此討論 */

 /*flex: 0 1 0; */
flex: 0;     
/* item縮至最小，如果所有的item的flex都被設置為0，則無視item的原來在主軸上的長度，而統一縮至最小
 
*/


/* flex: 0 0 auto; */
flex: none;
/* 不放大不縮小，即使所有的item在主軸上的長度之和會超出父容器也不會縮小 */     

最後要註意的一點是flex item元素的float clear vertical-align會失效！！

flex屬性設置