KNACSS/css/flexbox.css

66 lines
1.5 KiB
CSS
Raw Permalink Normal View History

/* ----------------------------- */
/* ==flexbox classes */
/* ----------------------------- */
/* flexbox layout context on container */
.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/* horizontal alignment */
.flex-h {
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
/* vertical alignment */
.flex-v {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
/* for fluid items */
.flex-fluid {
-moz-box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
}
/* for items that must appear first */
.flex-start {
-webkit-box-ordinal-group: -1;
-moz-box-ordinal-group: 0;
-ms-flex-order: -1;
-webkit-order: -1;
-moz-order: -1;
order: -1;
}
/* for items that must appear middle */
.flex-mid {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
-moz-order: 1;
order: 1;
}
/* for items that must appear at the end */
.flex-end {
-webkit-box-ordinal-group: 42;
-moz-box-ordinal-group: 42;
-ms-flex-order: 42;
-webkit-order: 42;
-moz-order: 42;
order: 42;
}