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:

```scss /* * 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:

```scss / 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:

```html

```

The final result will be:

Check this pen for a live example:

{% codepen https://codepen.io/NicolaCastellaniDev/pen/wvwdWMV %}

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