flexbox.less

/* Flexible box model classes */
/* Taken from Alex Russell http://infrequently.org/2009/08/css-3-progress/ */

/* This file is a compatibility layer.  It allows the usage of flexible box 
model layouts accross multiple browsers, including older browsers.  The newest,
universal implementation of the flexible box model is used when available (see
`Modern browsers` comments below).  Browsers that are known to implement this 
new spec completely include:

    Firefox 28.0+
    Chrome 29.0+
    Internet Explorer 11+ 
    Opera 17.0+

Browsers not listed, including Safari, are supported via the styling under the
`Old browsers` comments below.
*/


.hbox {
    /* Old browsers */
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;

    display: box;
    box-orient: horizontal;
    box-align: stretch;

    /* Modern browsers */
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.hbox > * {
    /* Old browsers */
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;

    /* Modern browsers */
    flex: none;
}

.vbox {
    /* Old browsers */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;

    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;

    display: box;
    box-orient: vertical;
    box-align: stretch;

    /* Modern browsers */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.vbox > * {
    /* Old browsers */
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    
    /* Modern browsers */
    flex: none;
}

.hbox.reverse,
.vbox.reverse,
.reverse {
    /* Old browsers */
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    box-direction: reverse;
    
    /* Modern browsers */
    flex-direction: row-reverse;
}

.hbox.box-flex0,
.vbox.box-flex0,
.box-flex0 {
    /* Old browsers */
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    
    /* Modern browsers */
    flex: none;
    width: auto;
}

.hbox.box-flex1,
.vbox.box-flex1,
.box-flex1 {
    /* Old browsers */
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;

    /* Modern browsers */
    flex: 1;
}

.hbox.box-flex,
.vbox.box-flex,
.box-flex {
    /* Old browsers */
    .box-flex1();
}

.hbox.box-flex2,
.vbox.box-flex2,
.box-flex2 {
    /* Old browsers */
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;

    /* Modern browsers */
    flex: 2;
}

.box-group1 {
    /*  Deprecated */
    -webkit-box-flex-group: 1;
    -moz-box-flex-group: 1;
    box-flex-group: 1;
}

.box-group2 {
    /* Deprecated */
    -webkit-box-flex-group: 2;
    -moz-box-flex-group: 2;
    box-flex-group: 2;
}

.hbox.start, 
.vbox.start,
.start {
    /* Old browsers */
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
    
    /* Modern browsers */
    justify-content: flex-start;
}

.hbox.end, 
.vbox.end,
.end {
    /* Old browsers */
    -webkit-box-pack: end;
    -moz-box-pack: end;
    box-pack: end;
    
    /* Modern browsers */
    justify-content: flex-end;
}

.hbox.center, 
.vbox.center,
.center {
    /* Old browsers */
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    
    /* Modern browsers */
    justify-content: center;
}

.hbox.baseline, 
.vbox.baseline,
.baseline {
    /* Old browsers */
    -webkit-box-pack: baseline;
    -moz-box-pack: baseline;
    box-pack: baseline;
    
    /* Modern browsers */
    justify-content: baseline;
}

.hbox.stretch, 
.vbox.stretch,
.stretch {
    /* Old browsers */
    -webkit-box-pack: stretch;
    -moz-box-pack: stretch;
    box-pack: stretch;
    
    /* Modern browsers */
    justify-content: stretch;
}

.hbox.align-start, 
.vbox.align-start,
.align-start {
    /* Old browsers */
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;
    
    /* Modern browsers */
    align-items: flex-start;
}

.hbox.align-end, 
.vbox.align-end,
.align-end {
    /* Old browsers */
    -webkit-box-align: end;
    -moz-box-align: end;
    box-align: end;
    
    /* Modern browsers */
    align-items: flex-end;
}

.hbox.align-center, 
.vbox.align-center,
.align-center {
    /* Old browsers */
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    
    /* Modern browsers */
    align-items: center;
}

.hbox.align-baseline, 
.vbox.align-baseline,
.align-baseline {
    /* Old browsers */
    -webkit-box-align: baseline;
    -moz-box-align: baseline;
    box-align: baseline;
    
    /* Modern browsers */
    align-items: baseline;
}

.hbox.align-stretch, 
.vbox.align-stretch,
.align-stretch {
    /* Old browsers */
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    box-align: stretch;
    
    /* Modern browsers */
    align-items: stretch;
}