flexbox less mixins

Works for android, windows phone, ios, internet explorer, safari, chrome, firefox.

.flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.flexbox-center() {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.flex(@values) {
    -webkit-box-flex: @values;
    -moz-box-flex:  @values;
    -ms-box-flex: @values;
    box-flex: @values;
    -webkit-flex:  @values;
    -ms-flex:  @values;
    flex:  @values;
}
.flex-direction-column {
    -webkit-box-orient:vertical;
    -moz-box-orient:vertical;
    -ms-box-orient:vertical;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>