flexbox css helpers

flexbox-util.css

/* 
  flexbox utility class used globally
*/
.flexbox {
  display: flex;
}
.flexdir-row {
  flex-direction: row;
}
.flexdir-rowrev {
  flex-direction: row-reverse;
}
.flexdir-col {
  flex-direction: column;
}
.flexdir-colrev {
  flex-direction: column-reverse;
}

/* flex amount classes for children */
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.flex-6 {
  flex: 6;
}
.flex-7 {
  flex: 7;
}
.flex-8 {
  flex: 8;
}
.flex-9 {
  flex: 9;
}
.flex-10 {
  flex: 10;
}
.flex-11 {
  flex: 11;
}
.flex-12 {
  flex: 12;
}
.flex-13 {
  flex: 13;
}
.flex-14 {
  flex: 14;
}
.flex-15 {
  flex: 15;
}
.flex-16 {
  flex: 16;
}
.flex-17 {
  flex: 17;
}
.flex-18 {
  flex: 18;
}
.flex-19 {
  flex: 19;
}
.flex-20 {
  flex: 20;
}

/* flex important override default with flex-i */
.flex-1-i {
  flex: 1 !important;
}
.flex-2-i {
  flex: 2 !important;
}
.flex-3-i {
  flex: 3 !important;
}
.flex-4-i {
  flex: 4 !important;
}
.flex-5-i {
  flex: 5 !important;
}
.flex-6-i {
  flex: 6 !important;
}
.flex-7-i {
  flex: 7 !important;
}
.flex-8-i {
  flex: 8 !important;
}
.flex-9-i {
  flex: 9 !important;
}
.flex-10-i {
  flex: 10 !important;
}
.flex-11-i {
  flex: 11 !important;
}
.flex-12-i {
  flex: 12 !important;
}
.flex-13-i {
  flex: 13 !important;
}
.flex-14-i {
  flex: 14 !important;
}
.flex-15-i {
  flex: 15 !important;
}
.flex-16-i {
  flex: 16 !important;
}
.flex-17-i {
  flex: 17 !important;
}
.flex-18-i {
  flex: 18 !important;
}
.flex-19-i {
  flex: 19 !important;
}
.flex-20-i {
  flex: 20 !important;
}
/* classes for wrapper element to align children */
.flex-center {
  justify-content: center;
  align-items: center;
}
.flexbox-space-center {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.flexbox-space-between {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
.flexbox-space-evenly {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}
.flexbox-space-around {
  display: flex;
  flex: 1;
  justify-content: space-around;
}

/* align classes */
.flex-align-baseline {
  align-items: baseline;
}
.flex-align-center {
  align-items: center;
}
.flex-align-flexend {
  align-items: flex-end;
}
.flex-align-flexstart {
  align-items: flex-start;
}

.flex-align-baseline.align-self {
  align-self: baseline;
}
.flex-align-center.align-self {
  align-self: center;
}
.flex-align-flexend.align-self {
  align-self: flex-end;
}
.flex-align-flexstart.align-self {
  align-self: flex-start;
}

.flex-justify-start {
  justify-content: flex-start;
}
.flex-justify-center {
  justify-content: center;
}
.flex-justify-end {
  justify-content: flex-end
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-no-wrap {
  flex-wrap: nowrap;
}
.flex-wraprev {
  flex-wrap: wrap-reverse;
}


/* FLEXGAP CLASSES */
.flexgap-1 > *{
 margin: 0 .25rem;
}
.flexgap-1 > *:first-child {
  margin: 0 .25rem 0 0;
}
.flexgap-1 > *:last-child{
 margin: 0 0 0 .25rem;
}
.flexgap-2 > *{
 margin: 0 .5rem;
}
.flexgap-2 > *:first-child {
  margin: 0 .5rem 0 0;
}
.flexgap-2 > *:last-child{
 margin: 0 0 0 .5rem;
}
.flexgap-3 > *{
 margin: 0 .75rem;
}
.flexgap-3 > *:first-child {
  margin: 0 .75rem 0 0;
}
.flexgap-3 > *:last-child{
 margin: 0 0 0 .75rem;
}
.flexgap-4 > *{
 margin: 0 1rem;
}
.flexgap-4 > *:first-child {
  margin: 0 1rem 0 0;
}
.flexgap-4 > *:last-child{
 margin: 0 0 0 1rem;
}
.flexgap-5 > *{
 margin: 0 1.5rem;
}
.flexgap-5 > *:first-child {
  margin: 0 1.5rem 0 0;
}
.flexgap-5 > *:last-child{
 margin: 0 0 0 1.5rem;
}



/* flex transition classes 
  these classes are for transitioning the flex css property. each class increases the duration by 100ms until reaching a 1s max at the fxt-10 class.

  fxt- is the transition class prefix and the following # number represents the duration. 

 */
.fxt-1 {
  transition: flex 0.1s ease-in-out;
}
.fxt-2 {
  transition: flex 0.2s ease-in-out;
}
.fxt-3 {
  transition: flex 0.3s ease-in-out;
}
.fxt-4 {
  transition: flex 0.4s ease-in-out;
}
.fxt-5 {
  transition: flex 0.5s ease-in-out;
}
.fxt-6 {
  transition: flex 0.6s ease-in-out;
}
.fxt-7 {
  transition: flex 0.7s ease-in-out;
}
.fxt-8 {
  transition: flex 0.8s ease-in-out;
}
.fxt-9 {
  transition: flex 0.9s ease-in-out;
}
.fxt-10 {
  transition: flex 1s ease-in-out;
}