/*flex相关设置*/
/*****************************start**************************/
.flex{display: flex;}
.flex-r{display: flex;flex-direction: row;}
.flex-c{display: flex;flex-direction: column;}

.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.flex6{flex: 6;}
.flex7{flex: 7;}
.flex8{flex: 8;}
.flex9{flex: 9;}
.flex10{flex: 10;}
.flex11{flex: 11;}
.flex12{flex: 12;}

.flex-start{display: flex;align-items:flex-start;justify-content: flex-start!important;}
.flex-center{display: flex;align-items:center;justify-content: center;!important;}
.flex-end{display: flex;align-items:flex-end;justify-content: flex-end;!important;}
.flex-fill{display: flex;align-items:stretch;justify-content: stretch;!important;}
.flex-wrap{flex-wrap:wrap; justify-content: space-between;}
.flex-nowrap{flex-wrap: nowrap;overflow-x: auto;}

/**命名简短化**/
.fls{display: flex;align-items:flex-start;justify-content: flex-start;}
.flc{display: flex;align-items:center;justify-content: center;}
.fle{display: flex;align-items:flex-end;justify-content: flex-end;}
.flf{display: flex;align-items:stretch;justify-content: stretch;}
/***常用简化***/
.flcc{
    display: flex;flex-direction: column;
    align-items:center;justify-content: center;
}
.flrc{
    display: flex;flex-direction: row;
    align-items:center;justify-content: center;
}
.flrs{
    display: flex;flex-direction: row;
    align-items:flex-start;justify-content: flex-start;
}
.flre{
    display: flex;flex-direction: row;
    align-items:flex-end;justify-content: flex-end;
}
.flrf{
    display: flex;flex-direction: row;
    align-items:stretch;justify-content: stretch;
}

.flex-wrap{flex-wrap:wrap;}
/*****************************end**************************/