DEV Community

Cover image for A mixin to rule them all - flexbox-driven layout mixin
Nicola
Nicola

Posted on

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

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;
}



Enter fullscreen mode Exit fullscreen mode

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);
}


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

The final result will be:

Flexbox final result

Check this pen for a live example:

I wish this article will help you <3 love you all

Top comments (3)

Collapse
 
chadnaz profile image
Chad Naz

Another example would be great. This looks awesome tho.. will try it out!

Collapse
 
nicolalc profile image
Nicola

Hi Mike, thanks for your compliments ^ you can take a look to the codepen now, I've added other examples ;)

Collapse
 
nicolalc profile image
Nicola

Yeah of course, I'll try to cover the main flexbox cases