Alignment

Align, justify and place utilities for grid and/or flex utilities with module mixins for responsive modifiers.

Examples

The property styles and prefix names combine with the different values to form the utility class name. As shown below the align-items and align-self properties don't use all the values demonstrated in the table.

Alignment properties, utility prefix names and values
Properties	Utility prefix	flex-start	flex-end	start	end	center	space-around	space-between	space-evenly
place-content	.pc-*	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
justify-content	.jc-*	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
align-content	.ac-*	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
align-items	.ai-*	Yes	Yes	Yes	Yes	Yes	No	No	No
align-self	.as-*	Yes	Yes	Yes	Yes	Yes	No	No	No

Compiled CSS

.pc-flex-start {
  place-content: flex-start;
}

.pc-flex-end {
  place-content: flex-end;
}

.pc-start {
  place-content: start;
}

.pc-end {
  place-content: end;
}

.pc-center {
  place-content: center;
}

.pc-space-around {
  place-content: space-around;
}

.pc-space-between {
  place-content: space-between;
}

.pc-space-evenly {
  place-content: space-evenly;
}

.jc-flex-start {
  justify-content: flex-start;
}

.jc-flex-end {
  justify-content: flex-end;
}

.jc-start {
  justify-content: start;
}

.jc-end {
  justify-content: end;
}

.jc-center {
  justify-content: center;
}

.jc-space-around {
  justify-content: space-around;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-space-evenly {
  justify-content: space-evenly;
}

.ac-flex-start {
  align-content: flex-start;
}

.ac-flex-end {
  align-content: flex-end;
}

.ac-start {
  align-content: start;
}

.ac-end {
  align-content: end;
}

.ac-center {
  align-content: center;
}

.ac-space-around {
  align-content: space-around;
}

.ac-space-between {
  align-content: space-between;
}

.ac-space-evenly {
  align-content: space-evenly;
}

.ai-flex-start {
  align-items: flex-start;
}

.ai-flex-end {
  align-items: flex-end;
}

.ai-start {
  align-items: start;
}

.ai-end {
  align-items: end;
}

.ai-center {
  align-items: center;
}

.as-flex-start {
  align-self: flex-start;
}

.as-flex-end {
  align-self: flex-end;
}

.as-start {
  align-self: start;
}

.as-end {
  align-self: end;
}

.as-center {
  align-self: center;
}

Responsive mixins

Responsive modifier mixins are also provided with no pre-defined breakpoints so they can be included as modules with custom SCSS breakpoints, or alternatively enabled in the breakpoints included with the framework (see below). The following demonstrates the static and responsive names for the place-content utility with flex-start values.

.pc-flex-start
.pc-flex-start-xl
.pc-flex-start-lg
.pc-flex-start-md
.pc-flex-start-sm
.pc-flex-start-xs

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin(s) anywhere below.

custom.scss

@use "sassmods/scss/sassmods" as *;
@include alignment-css;

// Example breakpoint
@media (max-width: 480px) {
  @include alignment-sm-css;
}

Source

_alignment.scss

//  ------------------------------------------------------------
//  Alignment
//  ------------------------------------------------------------
$flex-start:      flex-start;
$flex-end:        flex-end;
$start:           start;
$end:             end;
$center:          center;
$space-around:    space-around;
$space-between:   space-between;
$space-evenly:    space-evenly;

$alignment-1: (
  "flex-start": #{$flex-start},
  "flex-end": #{$flex-end},
  "start": #{$start},
  "end": #{$end},
  "center": #{$center},
  "space-around": #{$space-around},
  "space-between": #{$space-between},
  "space-evenly": #{$space-evenly},
) !default;

$alignment-2: (
  "flex-start": #{$flex-start},
  "flex-end": #{$flex-end},
  "start": #{$start},
  "end": #{$end},
  "center": #{$center},
) !default;

// Mixins
@mixin alignment-css {
  @each $name, $value in $alignment-1 {
    .pc-#{$name} {
      place-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .jc-#{$name} {
      justify-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .ac-#{$name} {
      align-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .ai-#{$name} {
      align-items: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .as-#{$name} {
      align-self: #{$value};
    }
  }
}

// Mixin breakpoints
// Extra large
@mixin alignment-xl-css {
  @each $name, $value in $alignment-1 {
    .pc-#{$name}-xl {
      place-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .jc-#{$name}-xl {
      justify-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .ac-#{$name}-xl {
      align-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .ai-#{$name}-xl {
      align-items: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .as-#{$name}-xl {
      align-self: #{$value};
    }
  }
}

// Large
@mixin alignment-lg-css {
  @each $name, $value in $alignment-1 {
    .pc-#{$name}-lg {
      place-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .jc-#{$name}-lg {
      justify-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .ac-#{$name}-lg {
      align-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .ai-#{$name}-lg {
      align-items: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .as-#{$name}-lg {
      align-self: #{$value};
    }
  }
}

// Medium
@mixin alignment-md-css {
  @each $name, $value in $alignment-1 {
    .pc-#{$name}-md {
      place-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .jc-#{$name}-md {
      justify-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .ac-#{$name}-md {
      align-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .ai-#{$name}-md {
      align-items: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .as-#{$name}-md {
      align-self: #{$value};
    }
  }
}

// Small
@mixin alignment-sm-css {
  @each $name, $value in $alignment-1 {
    .pc-#{$name}-sm {
      place-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .jc-#{$name}-sm {
      justify-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .ac-#{$name}-sm {
      align-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .ai-#{$name}-sm {
      align-items: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .as-#{$name}-sm {
      align-self: #{$value};
    }
  }
}

// Extra small
@mixin alignment-xs-css {
  @each $name, $value in $alignment-1 {
    .pc-#{$name}-xs {
      place-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .jc-#{$name}-xs {
      justify-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-1 {
    .ac-#{$name}-xs {
      align-content: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .ai-#{$name}-xs {
      align-items: #{$value};
    }
  }
  
  @each $name, $value in $alignment-2 {
    .as-#{$name}-xs {
      align-self: #{$value};
    }
  }
}