less 定义 flex兼容样式

定义一套flex的 弹性盒兼容     引用之后直接传入参数就可以实现 

 /* 基本弹性盒子 */
 .demo{
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */  
    display: -moz-box; /* Firefox 17- */  
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */  
    display: -moz-flex; /* Firefox 18+ */  
    display: -ms-flexbox; /* IE 10 */  
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

// 定义主轴方向
.direction(@type:row){
    -webkit-box-orient: vertical;
    -ms-flex-direction: @type;
    -webkit-flex-direction: @type;
    flex-direction: @type;
}

// 定义垂直位置
.align(@type){
    -webkit-box-align: @type;
    -ms-flex-align: @type;
    -webkit-align-items: @type;
    align-items: @type;
}

// 定义横向位置
.justify(@type){
    -webkit-box-pack: @type;
    -ms-flex-pack: @type;
    -webkit-justify-content: @type;
    justify-content: @type;
}

// 定义换行
.wrap(@type){
    -webkit-flex-wrap: @type;
    -moz-flex-wrap: @type;
    -ms-flex-wrap: @type;
    -o-flex-wrap: @type;
    flex-wrap:  @type;
}

/* 方向 横向*/
.directionrow{
    .direction
}

/* 方向 竖向*/
.directioncol{
    .direction(column)
}

/* 竖向剧中 */
.align{
    // .align(flex-start)
    .align(center)
    // .align(flex-end)
}

/* 横向剧中 */
.justify{
    // .justify(flex-start);
    .justify(center);
    // .justify(flex-end);
    // 两边靠边  其余平分
    // .justify(space-between);
    // 剩余空间平分 加到盒子的间隙  不相等
    // .justify(space-around);
    // 剩余空间完全平分   盒子间距 完全相等
    // .justify(space-evenly)
}

/* 换行 */
.wrap{
   .wrap(wrap)
//    .wrap(nowrap)
//    .wrap(wrap-reverse)
}

/* 自适应 */
.flex{
    width: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}