/*
flex  璁剧疆涓篺lex
inline-flex  琛屽唴flex

flex-row  涓昏酱妯悜鎺掑垪
flex-column 涓昏酱绾靛悜鎺掑垪

灞炴€у畾涔変簡椤圭洰鍦ㄤ富杞翠笂鐨勫榻愭柟寮�
justify-content-center  璁剧疆涓昏酱灞呬腑
justify-content-end 璁剧疆涓昏酱瀵归綈搴曢儴
justify-content-space-between 璁剧疆涓昏酱鍏冪礌鍧囧垎涓旂揣璐翠袱杈�
justify-content-space-around 璁剧疆涓昏酱鍏冪礌鍧囧垎

灞炴€у畾涔夐」鐩湪浜ゅ弶杞翠笂濡備綍瀵归綈
align-items-start 璁剧疆渚ц酱璧风偣瀵归綈
align-items-end  璁剧疆渚ц酱瀵归綈搴曢儴
align-items-center 璁剧疆渚ц酱灞呬腑瀵归綈
align-items-baseline 璁剧疆椤圭洰鐨勭涓€琛屾枃瀛楃殑鍩虹嚎瀵归綈

澶氭牴杞寸嚎鐨勫榻愭柟寮�
align-content-start   涓庝氦鍙夎酱鐨勮捣鐐瑰榻�
align-content-end     涓庝氦鍙夎酱鐨勭粓鐐瑰榻�
align-content-center  涓庝氦鍙夎酱鐨勪腑鐐瑰榻�
align-content-between 涓庝氦鍙夎酱涓ょ瀵归綈锛岃酱绾夸箣闂寸殑闂撮殧骞冲潎鍒嗗竷
align-content-around 姣忔牴杞寸嚎涓や晶鐨勯棿闅旈兘鐩哥瓑銆傛墍浠ワ紝杞寸嚎涔嬮棿鐨勯棿闅旀瘮杞寸嚎涓庤竟妗嗙殑闂撮殧澶т竴鍊�
align-content-stretch 锛堥粯璁ゅ€硷級锛氳酱绾垮崰婊℃暣涓氦鍙夎酱


瀹氫箟锛屽鏋滀竴鏉¤酱绾挎帓涓嶄笅锛屽浣曟崲琛屻€�
flex-wrap-nowrap 涓嶆崲琛�
flex-wrap-wrap 鎹㈣锛岀涓€琛屽湪涓婃柟銆�
flex-wrap-reverse 鎹㈣锛岀涓€琛屽湪涓嬫柟銆�


*/

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.inline-flex {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
}

.flex-row {
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.flex-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.justify-content-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.justify-content-space-around {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.align-items-start {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.align-items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.align-items-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}

.flex-wrap-nowrap {
    -webkit-box-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-wrap-wrap {
    -webkit-box-wrap: wrap;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    -webkit-box-wrap: reverse;
    -ms-flex-wrap: reverse;
    -webkit-flex-wrap: reverse;
    flex-wrap: reverse;
}



.align-content-start {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    -webkit-align-conten: flex-start;
    align-content: flex-start;
}

.align-content-end {
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    -webkit-align-conten: flex-end;
    align-content: flex-end;
}

.align-content-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-conten: center;
    align-content: center;
}

.align-content-between {
    -webkit-box-align: space-between;
    -ms-flex-align: space-between;
    -webkit-align-conten: space-between;
    align-content: space-between;
}

.align-content-around {
    -webkit-box-align: space-around;
    -ms-flex-align: space-around;
    -webkit-align-conten: space-around;
    align-content: space-around;
}

.align-content-stretch {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-conten: stretch;
    align-content: stretch;
}


/*  

鍐欏湪璁剧疆涓篺lex鐨勫瓙鍏冪礌涓婄殑6涓€� 锛堥渶瑕佹敼鍏蜂綋鍙傛暟鍊硷級 娉ㄦ剰鏄瓙鍏冪礌

1.order灞炴€у畾涔夐」鐩殑鎺掑垪椤哄簭銆傛暟鍊艰秺灏忥紝鎺掑垪瓒婇潬鍓嶏紝榛樿涓�0銆�
.item{
-prefix-box-ordinal-group: 1; 
 -webkit-box-ordinal-group: 2;    
 -moz-box-ordinal-group: 2;       
 -ms-flex-order: 2;               
 -webkit-order: 2;                
 order: 2;  
}
 2. flex-grow灞炴€у畾涔夐」鐩殑鏀惧ぇ姣斾緥锛岄粯璁や负0锛屽嵆濡傛灉瀛樺湪鍓╀綑绌洪棿锛屼篃涓嶆斁澶с€�
.item{   
 -moz-flex-flex-grow: 2;         
 -ms-flex-flex-grow: 2;               
 -webkit-flex-grow: 2;                
 flex-grow: 2; 
}
3.flex-shrink灞炴€у畾涔変簡椤圭洰鐨勭缉灏忔瘮渚嬶紝榛樿涓�1锛屽嵆濡傛灉绌洪棿涓嶈冻锛岃椤圭洰灏嗙缉灏忋€�
.item{
 -moz-flex-shrink: 2;         
 -ms-flex-shrink: 2;               
 -webkit-flex-shrink: 2;                
flex-shrink:: 2;
}
4.flex-basis灞炴€у畾涔変簡鍦ㄥ垎閰嶅浣欑┖闂翠箣鍓嶏紝椤圭洰鍗犳嵁鐨勪富杞寸┖闂达紙main size锛夈€傛祻瑙堝櫒鏍规嵁杩欎釜灞炴€э紝璁＄畻涓昏酱鏄惁鏈夊浣欑┖闂淬€傚畠鐨勯粯璁ゅ€间负auto锛屽嵆椤圭洰鐨勬湰鏉ュぇ灏忋€�
.item{
 -moz-flex-basis: 2;         
 -ms-flex-basis: 2;               
 -webkit-flex-basis: 2;                
flex-basis:: 2;
}
5. flex灞炴€ф槸flex-grow, flex-shrink 鍜� flex-basis鐨勭畝鍐欙紝榛樿鍊间负0 1 auto銆傚悗涓や釜灞炴€у彲閫夈€�
.item{
 -moz-flex: 2;         
 -ms-flex: 2;               
 -webkit-flex: 2;                
flex:: 2;
}
6. align-self灞炴€у厑璁稿崟涓」鐩湁涓庡叾浠栭」鐩笉涓€鏍风殑瀵归綈鏂瑰紡锛屽彲瑕嗙洊align-items灞炴€с€傞粯璁ゅ€间负auto锛岃〃绀虹户鎵跨埗鍏冪礌鐨刟lign-items灞炴€э紝濡傛灉娌℃湁鐖跺厓绱狅紝鍒欑瓑鍚屼簬stretch銆�
.item{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
*/