2. sds-flex()

Add Flexbox to projects using Sipster's sds-flex() mixin.

As mentioned in the previous section, Sipster provides a custom SCSS mixin to simplify using Flexbox. To use the sds-flex() mixin, you first need to consider the four basic Flexbox properties:

Flex Property	Options
display	flex
flex-direction	row | column
justify-content	flex-start | center | flex-end | space-around | space-between
align-items	flex-start | center | flex-end

With this in mind, the format for Sipster's mixin is:

@include sds-flex($justify, $align, $direction);

This mixin accepts three parameters (the display property is set automatically since this is required for the other flex properties to even work). The $justify and $align parameters are mandatory values based on the options in the table above. The $direction is optional and defaults to row if not specified.

Because this is a mixin, it needs to be implemented at the same level as other properties for a CSS selector using @include.

Example:

// $direction not specified, so defaults to `row`
.customClass {
  @include sds-flex (center, center);
}

// specifying $direction as `column`
.anotherClass {
  @include sds-flex(flex-end, center, column);
}

Compiled CSS:

/* $direction not specified, so defaults to `row` */
.customClass {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* specifying $direction as `column` */
.anotherClass {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}