flexbox.css

/*
  u-basscss, github.com/tiffon/u-basscss
  fork from http://basscss.com
  MIT License
*/

.ub-flex { display: flex }

@media (--breakpoint-sm) {
  .ub-sm-flex { display: flex }
}

@media (--breakpoint-md) {
  .ub-md-flex { display: flex }
}

@media (--breakpoint-lg) {
  .ub-lg-flex { display: flex }
}

.ub-flex-column  { flex-direction: column }
.ub-flex-wrap    { flex-wrap: wrap }

.ub-items-start    { align-items: flex-start }
.ub-items-end      { align-items: flex-end }
.ub-items-center   { align-items: center }
.ub-items-baseline { align-items: baseline }
.ub-items-stretch  { align-items: stretch }

.ub-self-start    { align-self: flex-start }
.ub-self-end      { align-self: flex-end }
.ub-self-center   { align-self: center }
.ub-self-baseline { align-self: baseline }
.ub-self-stretch  { align-self: stretch }

.ub-justify-start   { justify-content: flex-start }
.ub-justify-end     { justify-content: flex-end }
.ub-justify-center  { justify-content: center }
.ub-justify-between { justify-content: space-between }
.ub-justify-around  { justify-content: space-around }

.ub-content-start   { align-content: flex-start }
.ub-content-end     { align-content: flex-end }
.ub-content-center  { align-content: center }
.ub-content-between { align-content: space-between }
.ub-content-around  { align-content: space-around }
.ub-content-stretch { align-content: stretch }

/* 1. Fix for Chrome 44 bug. https://code.google.com/p/chromium/issues/detail?id=506893 */
.ub-flex-auto {
  flex: 1 1 auto;
  min-width: 0; /* 1 */
  min-height: 0; /* 1 */
}
.ub-flex-none { flex: none }

.ub-order-0 { order: 0 }
.ub-order-1 { order: 1 }
.ub-order-2 { order: 2 }
.ub-order-3 { order: 3 }
.ub-order-last { order: 99999 }

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);