Flex: Space 3 P 5 X

.l-flex {
  align-items: flex-start;
  display: flex;

  .l-flex-x-grow {
    flex-grow: 1;
  }

  .l-flex-x-shrink {
    flex-shrink: 1;
  }

  .l-flex-x-auto {
    flex: 0 0 auto;
  }

}

// Space Children

@each $name, $value in $utility-gridsubmodules {

  .l-flex-space#{$name} {

    > *:not(:last-child) {
      margin-right: $gridspacing * $value;
    }

  }

  .l-flex-space#{$name}.l-flex-column {

    > *:not(:last-child) {
      margin-bottom: $gridspacing * $value;
      margin-right: 0;
    }

  }

}

// Alignment

.l-flex-aligncenter {
  align-items: center;
}

.l-flex-alignend {
  align-items: flex-end;
}

.l-flex-alignstretch {
  align-items: stretch;
}

// Column

.l-flex-column {
  flex-direction: column;
}

// Justification

.l-flex-justifyaround {
  justify-content: space-around;
}

.l-flex-justifybetween {
  justify-content: space-between;
}

.l-flex-justifycenter {
  justify-content: center;
}

.l-flex-justifyend {
  justify-content: flex-end;
}