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;
}