Add individual mixins for the various flex directions

[caranicas]

Description

Similar to issue #96 the row, row-reverse, column, and column-reverse properties should be in their own mix-ins to allow for more flexibility.

Then these can also be applied to --layout-horizontal/-reverse and --layout-column/-reverse to decrease maintenance.

Expected outcome

     --layout: {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
      };

      --layout-direction-row: {
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
      };

      --layout-horizontal: {
        @apply --layout;
        @apply --layout-direction-row;
      };

      --layout-direction-row-reverse: {
        -ms-flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;
        flex-direction: row-reverse;
      };

      --layout-horizontal-reverse: {
        @apply --layout;
        @apply --layout-direction-row-reverse;
      };

[notwaldorf]

@caranicas a PR for this would be appreciated as well! <3