basscss-flexbox
Version:
Flexbox utilities
85 lines (47 loc) • 2.52 kB
CSS
.flex { display: -ms-flexbox; display: flex }
@media (min-width: 40em) {
.sm-flex { display: -ms-flexbox; display: flex }
}
@media (min-width: 52em) {
.md-flex { display: -ms-flexbox; display: flex }
}
@media (min-width: 64em) {
.lg-flex { display: -ms-flexbox; display: flex }
}
.flex-column { -ms-flex-direction: column; flex-direction: column }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap }
.items-start { -ms-flex-align: start; align-items: flex-start }
.items-end { -ms-flex-align: end; align-items: flex-end }
.items-center { -ms-flex-align: center; align-items: center }
.items-baseline { -ms-flex-align: baseline; align-items: baseline }
.items-stretch { -ms-flex-align: stretch; align-items: stretch }
.self-start { -ms-flex-item-align: start; align-self: flex-start }
.self-end { -ms-flex-item-align: end; align-self: flex-end }
.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center }
.self-baseline { -ms-flex-item-align: baseline; align-self: baseline }
.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch }
.justify-start { -ms-flex-pack: start; justify-content: flex-start }
.justify-end { -ms-flex-pack: end; justify-content: flex-end }
.justify-center { -ms-flex-pack: center; justify-content: center }
.justify-between { -ms-flex-pack: justify; justify-content: space-between }
.justify-around { -ms-flex-pack: distribute; justify-content: space-around }
.justify-evenly { -ms-flex-pack: space-evenly; justify-content: space-evenly }
.content-start { -ms-flex-line-pack: start; align-content: flex-start }
.content-end { -ms-flex-line-pack: end; align-content: flex-end }
.content-center { -ms-flex-line-pack: center; align-content: center }
.content-between { -ms-flex-line-pack: justify; align-content: space-between }
.content-around { -ms-flex-line-pack: distribute; align-content: space-around }
.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch }
/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
.flex-none { -ms-flex: none; flex: none }
.order-0 { -ms-flex-order: 0; order: 0 }
.order-1 { -ms-flex-order: 1; order: 1 }
.order-2 { -ms-flex-order: 2; order: 2 }
.order-3 { -ms-flex-order: 3; order: 3 }
.order-last { -ms-flex-order: 99999; order: 99999 }