Flex Utilities

Provides utility functions for commonly used align-items and justify-content values in flexbox layouts.

Flex Aligns

Gets a filtered map of flex aligns, returning both names and values, for iteration.

Signature:

@function flex-aligns($includes: LIST = null, $excludes: LIST = null):
    MAP<STRING, FLEX-ALIGN>;

Example:

.my-grid {
  display: flex;

  @each $name, $align in termeh.flex-aligns(null, ("stretch")) {
    &.is-#{$name}-aligned {
      flex-align: $align;
    }
  }
}

Available Aligns

Key	Value
flex-start	flex-start
flex-end	flex-end
center	center
space-between	space-between
space-around	space-around
space-evenly	space-evenly

Flex Justifies

Gets a filtered map of flex justifies, returning both names and values, for iteration.

Signature:

@function flex-justifies($includes: LIST = null, $excludes: LIST = null):
    MAP<STRING, FLEX-ALIGN>;

Example:

.my-grid {
  display: flex;

  @each $name, $justify in termeh.flex-justifies(null, ("stretch")) {
    &.is-#{$name}-justified {
      justify-content: $align;
    }
  }
}

Available Aligns

Key	Value
flex-start	flex-start
flex-end	flex-end
center	center
space-between	space-between
space-around	space-around
space-evenly	space-evenly