[Scss Flex] Reuse Flexbox Styles With A Sass Mixin

This lesson covers flexbox in a reusable mixin that should cover most layout situations on your site. With variables and common defaults, this mixin will cover most alignment issues and replace the need for tables for all time. Need a column with each item evenly spaced but starting their alignment on the top? No problem! How about a row with the items evenly spaced out as well as equal spacing around the edges? We have you covered!

 

@mixin flex-container($direction: row, $spacing: space-between, $alignment: null) {
  display: flex;
  flex-direction: $direction;
  justify-content: $spacing;
  align-items: $alignment;
}

.input-wrapper {
  @include flex-container($direction: column, $spacing: space-around);
}

.side-by-side {
  @include flex-container();
}

 

About align-items: Link