@ustack/uskin/css/flexbox.less

A graceful framework which provides developers another chance to build an amazing site.

// http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox by RubyLouvre

// Modified by LeeY


// display: flex

.flexbox() {
    //IE10
    display: -ms-flexbox;
    // new spec
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
}

// flex //
.flex(@flex) {
    -webkit-flex: @flex;
    -moz-flex: @flex;
    -ms-flex: @flex;
    flex: @flex;
}
@flexvalue: 1 1 auto;
// flex-derection = box-orient + box-direction
.flex-direction(@direction) when (@direction = row) {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-direction(@direction) when (@direction = row-reverse) {
    -webkit-flex-direction: row-reverse;
    -moz-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-direction(@direction) when (@direction = column) {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex-direction(@direction) when (@direction = column-reverse) {
//http://www.w3school.com.cn/cssref/pr_box-orient.asp
    -webkit-flex-direction: column-reverse;
    -moz-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}
.flex-direction(@direction) {
    -webkit-flex-direction: @direction;
    -moz-flex-direction: @direction;
    -ms-flex-direction: @direction;
    flex-direction: @direction;
}

// order //
.order(@order) {
    -webkit-order: @order;
    -moz-order: @order;
    -ms-order: @order;
    order: @order;
}


//justify content//

//2009 property is box-pack
//2009 property does not support a method for space-around

//start
//end
//center
//justify

.justify-content(@justify-method) when (@justify-method = flex-start) {
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.justify-content(@justify-method) when (@justify-method = flex-end) {
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.justify-content(@justify-method) when (@justify-method = center) {
    -ms-flex-pack: center; 
    justify-content: center;
}



.justify-content(@justify-method) when (@justify-method = space-between) {
    -ms-flex-pack: justify;
    justify-content: space-between;
}
// note there is no fallback 2009 spec support for space-around
.justify-content(@justify-method) when (@justify-method = space-around) {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

// 2011 spec

// flex-start (default): items are packed toward the start line
// flex-end: items are packed toward to end line
// center: items are centered along the line
// space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
// space-around: items are evenly distributed in the line with equal space around them

.justify-content(@justify-method) {
    -webkit-justify-content: @justify-method;
    -moz-justify-content: @justify-method;
    -ms-justify-content: @justify-method;
    justify-content: @justify-method;
}

.align-items(@align-method) when (@align-method = flex-start ){
    -ms-flex-align: start;//http://realworldvalidator.com/css/module/Microsoft/-ms-flex-align
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items(@align-method) when (@align-method = flex-end ){
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items(@align-method) when (@align-method = center ){
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items(@align-method) when (@align-method = baseline ){
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
}
.align-items(@align-method) when (@align-method = stretch ){
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.align-items(@align-method){
    -ms-flex-align: @align-method;
    -webkit-align-items: @align-method;
    align-items: @align-method;
}
.flex-wrap(@wrap-method) when(@wrap-method = nowrap){
    -ms-flex-wrap:none;
    -moz-flex-wrap:nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex-wrap(@wrap-method) when(@wrap-method = wrap){
    -ms-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap(@wrap-method) when(@wrap-method = wrap-reverse){
    -ms-flex-wrap:wrap-reverse;
    -moz-flex-wrap:wrap-reverse;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}
.flex-wrap(@wrap-method){
    -ms-flex-wrap:@wrap-method;
    -moz-flex-wrap:@wrap-method;
    -webkit-flex-wrap:@wrap-method;
    flex-wrap:@wrap-method;
}
.align-self(@value) when(@value = flex-start){
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align-self(@value) when(@value = flex-end){
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align-self(@value) when(@value = center){
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}
.align-self(@value) when(@value = baseline){
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;
}
.align-self(@value) when(@value = stretch){
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.align-self(@value){
    -webkit-align-self:@value;
    -ms-flex-item-align:@value;
    lign-self:@value
}