// 弹性盒布局（IE9及以下浏览器不支持）
.flex() {
    & when (@prefix = true) {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
    }
    display: flex;
}
.flex(inline) {
    & when (@prefix = true) {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
    }
    display: inline-flex;
}
// 是否换行（设置在父元素上）
.flex-wrap(@wrap: wrap) {
    & when (@prefix = true) {
        -webkit-flex-wrap: @wrap;
            -ms-flex-wrap: @wrap;
    }
    flex-wrap: @wrap;
}
// 排列方向（设置在父元素上）
.flex-x() {
    & when (@prefix = true) {
        -webkit-box-direction: normal;
           -moz-box-direction: normal;
        -webkit-box-orient: horizontal;
           -moz-box-orient: horizontal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
    }
    flex-direction: row;
}
.flex-x(reverse) {
    & when (@prefix = true) {
        -webkit-box-direction: reverse;
           -moz-box-direction: reverse;
        -webkit-box-orient: horizontal;
           -moz-box-orient: horizontal;
        -webkit-flex-direction: row-reverse;
            -ms-flex-direction: row-reverse;
    }
    flex-direction: row-reverse;
}
.flex-y() {
    & when (@prefix = true) {
        -webkit-box-direction: normal;
           -moz-box-direction: normal;
        -webkit-box-orient: vertical;
           -moz-box-orient: vertical;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
    }
    flex-direction: column;
}
.flex-y(reverse){
    & when (@prefix = true) {
        -webkit-box-direction: reverse;
           -moz-box-direction: reverse;
        -webkit-box-orient: vertical;
           -moz-box-orient: vertical;
        -webkit-flex-direction: column-reverse;
            -ms-flex-direction: column-reverse;
    }
    flex-direction: column-reverse;
}
// 全部水平垂直居中对齐（设置在父元素上）
.flex-center() {
    & when (@prefix = true) {
               -webkit-box-pack: center;
                  -moz-box-pack: center;
                  -ms-flex-pack: center;
        -webkit-justify-content: center;

          -webkit-box-align: center;
             -moz-box-align: center;
             -ms-flex-align: center;
        -webkit-align-items: center;

           -ms-flex-line-pack: center;
        -webkit-align-content: center;
    }

    justify-content: center;
    align-items: center;
    align-content: center;
}
// 全部水平垂直两端对齐（设置在父元素上）
.flex-justify() {
    & when (@prefix = true) {
               -webkit-box-pack: justify;
                  -moz-box-pack: justify;
                  -ms-flex-pack: justify;
        -webkit-justify-content: space-between;

          -webkit-box-align: center;
             -moz-box-align: center;
             -ms-flex-align: center;
        -webkit-align-items: center;

           -ms-flex-line-pack: justify;
        -webkit-align-content: space-between;
    }

    justify-content: space-between;
    align-items: center;
    align-content: space-between;
}
// 全部水平垂直平均分布对齐（设置在父元素上）
.flex-mean() {
    & when (@prefix = true) {
               -webkit-box-pack: justify;
                  -moz-box-pack: justify;
                  -ms-flex-pack: justify;
        -webkit-justify-content: space-around;

          -webkit-box-align: center;
             -moz-box-align: center;
             -ms-flex-align: center;
        -webkit-align-items: center;

           -ms-flex-line-pack: distribute;
        -webkit-align-content: space-around;
    }

    justify-content: space-around;
    align-items: center;
    align-content: space-around;
}
// 比例分配（设置在子元素上）
.flex-item(@value) {
    & when (@prefix = true) {
        -webkit-box-flex: @value;
           -moz-box-flex: @value;
            -webkit-flex: @value 1 auto;
                -ms-flex: @value 1 auto;
    }
    flex: @value 1 auto;
}
// 次序分配（设置在子元素上）
.flex-order(@val: 0) {
    & when (@prefix = true) {
        -webkit-box-ordinal-group: @val + 1;
           -moz-box-ordinal-group: @val + 1;
                   -ms-flex-order: @val;
                    -webkit-order: @val;
    }
    order: @val;
}