Flexbox Mixins

[Elli]

Flexbox Mixins

CSS

/* ======================================================
* Flexbox Mixins
* ====================================================== */

/**
* Used for responsive behavior on non-tablular elements,
* as well as alignment options that are otherwise
* onerous with old-school CSS.
*
* [gist url="https://gist.github.com/gyandeeps/c31f83e0eebf3a1c664cd5cc04cc9836"]
*/

.flex-display(@display: flex) {
   display: ~"-webkit-@{display}";
   display: ~"-moz-@{display}";
   display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
   display: ~"-ms-@{display}"; // IE11
   display: @display;
}

.flex-direction(@direction: row) {
   -webkit-flex-direction: @direction;
   -moz-flex-direction: @direction;
   -ms-flex-direction: @direction;
   flex-direction: @direction;
}

.flex-wrap(@wrap: nowrap) {
   -webkit-flex-wrap: @wrap;
   -moz-flex-wrap: @wrap;
   -ms-flex-wrap: @wrap;
   flex-wrap: @wrap;
}

.flex-grow(@grow: 0) {
   -webkit-flex-grow: @grow;
   -moz-flex-grow: @grow;
   -ms-flex-grow: @grow;
   flex-grow: @grow;
}

.flex-shrink(@shrink: 1) {
   -webkit-flex-shrink: @shrink;
   -moz-flex-shrink: @shrink;
   -ms-flex-shrink: @shrink;
   flex-shrink: @shrink;
}

.flex-basis(@width: auto) {
   -webkit-flex-basis: @width;
   -moz-flex-basis: @width;
   -ms-flex-basis: @width;
   flex-basis: @width;
}

.justify-content(@justify: flex-start) {
   .ms-flex-justify(@value) {
       ._(@value);
       ._(space-between) { -ms-flex-pack: justify;      }
       ._(space-around)  { -ms-flex-pack: distribute;   }
       ._(space-evenly)  { -ms-flex-pack: space-evenly; }
       ._(flex-end)      { -ms-flex-pack: end;          }
       ._(flex-start)    { -ms-flex-pack: start;        }
       ._(center)        { -ms-flex-pack: center;       }
   }

   -webkit-justify-content: @justify;
   -moz-justify-content: @justify;
   -ms-justify-content: @justify;
   justify-content: @justify;
   .ms-flex-justify(@justify);
}

.align-items(@align: stretch) {
   .ms-flex-align(@value) {
       ._(@value);
       ._(baseline)    { -ms-flex-align: baseline; }
       ._(stretch)     { -ms-flex-align: stretch;  }
       ._(flex-end)    { -ms-flex-align: end;      }
       ._(flex-start)  { -ms-flex-align: start;    }
       ._(center)      { -ms-flex-align: center;   }
   }

   -webkit-align-items: @align;
   -moz-align-items: @align;
   -ms-align-items: @align;
   align-items: @align;
   .ms-flex-align(@align);
}

.align-content(@align: normal) {
   .ms-flex-line-pack(@value) {
       ._(@value);
       ._(flex-start)    { -ms-flex-line-pack: start;        }
       ._(flex-end)      { -ms-flex-line-pack: end;          }
       ._(baseline)      { -ms-flex-line-pack: baseline;     }
       ._(space-between) { -ms-flex-line-pack: justify;      }
       ._(space-around)  { -ms-flex-line-pack: distribute;   }
       ._(space-evenly)  { -ms-flex-line-pack: space-evenly; }
       ._(stretch)       { -ms-flex-line-pack: stretch;      }
   }

   align-content: @align;
   .ms-flex-line-pack(@align);
}

.align-self(@align: auto) {
   .ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = flex-end) {
       -ms-flex-item-align: end;
   }

   .ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = flex-start) {
       -ms-flex-item-align: start;
   }

   .ms-flex-align-self(@msSelfAlign) when (@msSelfAlign = auto), (@msSelfAlign = center),(@msSelfAlign = baseline), (@msSelfAlign = stretch) {
       -ms-flex-item-align: @msSelfAlign;
   }

   -webkit-align-self: @align;
   -moz-align-self: @align;
   -ms-align-self: @align;
   align-self: @align;
   .ms-flex-align-self(@align);
}

Example Usage

.element {
   .flex-display();
   .flex-wrap(wrap);
}

.child-element {
   .flex-shrink(0);
   .flex-basis(50%);
   max-width: 50%;
}