A mixin to rule them all - flexbox-driven layout mixin

#flexbox #css #mixin #utilities

Sometimes using flexbox layout could generate tons of css properties and the final result could be unreadable due to the properties generated.

I've maded a simple scss mixin to handle generic flexbox layouts, because I work on complex web applications and I have to made a lot of different layouts.

This mixin handles some (not all) flexbox properties, and covers the main cases with flexbox layouts:



/**
* FLEXBOX
* A mixin to rule complex flexbox layout
* @author nicolacastellanidev@gmail.com
*/
@mixin flexbox(
  $display: flex,
  $direction: row,
  $placeContent: null,
  $placeItems: null,
  $wrap: nowrap,
  $shrink: 0,
  $grow: 0,
  $alignContent: null,
  $justifyContent: null,
  $alignItems: null,
  $justifyItems: null) {

    display: $display;
    flex-direction: $direction;

    @if $placeContent == null {
      @if $alignContent   { align-content: $alignContent; }
      @if $justifyContent { justify-content: $justifyContent; }
    } @else {
      place-content: $placeContent;
    }

    @if $placeItems == null {
      @if $alignItems   { align-items: $alignItems; }
      @if $justifyItems { justify-items: $justifyItems; }
    } @else {
      place-items: $placeItems;
    }

    flex-wrap: $wrap;
    flex-shrink: $shrink;
    flex-grow: $grow;
}

this mixin will help you defining a flexbox-driven elements, for example:



/* now we can add flexbox layout with a single line of code */
.anchor-top {
  @include flexbox($placeItems: flex-start);
}

.anchor-bottom {
  @include flexbox($placeItems: flex-end);
}

.anchor-center {
  @include flexbox($placeItems: center);
}

.anchor-left {
  @include flexbox($placeContent: flex-start);
}

.anchor-right {
  @include flexbox($placeContent: flex-end);
}

.anchor-center-hor {
  @include flexbox($placeContent: center);
}

These classes can be used to handle html layouts, like this:



<div class="container">
  <div class="box anchor-top anchor-left">
    TOP LEFT
  </div>
  <div class="box anchor-top anchor-center-hor">
    TOP CENTER
  </div>
  <div class="box anchor-top anchor-right">
    TOP RIGHT
  </div>
  <div class="box anchor-center anchor-left">
    CENTER LEFT
  </div>
  <div class="box anchor-center anchor-center-hor">
    CENTER CENTER
  </div>
  <div class="box anchor-center anchor-right">
    CENTER RIGHT
  </div>
  <div class="box anchor-bottom anchor-left">
    BOTTOM LEFT
  </div>
  <div class="box anchor-bottom anchor-center-hor">
    BOTTOM CENTER
  </div>
  <div class="box anchor-bottom anchor-right">
    BOTTOM RIGHT
  </div>
</div>