Utilities: Flexbox

TABLE OF CONTENTS:

• Flexbox: flex-center-left()
• Flexbox: flex-center()
• Flexbox: flex-center-right()

Flexbox: flex-center-left()

The flex-center-left file consist of 3 mixins: $flex-center-left-top, $flex-center-left-center and $flex-center-left-bottom. These mixins will set up the following CSS properties: display, justify-content and align-items. Examples of usage:

• Setting up width to 100px:

  @include flex-center-left-center();

• Setting up width to 0px:

  @include flex-center-left-center();

• Setting up height to 100px:

  @include flex-center-left-bottom();

Flexbox: flex-center()

The flex-center file consist of 3 mixins: $flex-center-top, $flex-center-center and $flex-center-bottom. These mixins will set up the following CSS properties: display, justify-content and align-items. Examples of usage:

• Setting up width to 100px:

  @include flex-center-top();

• Setting up width to 0px:

  @include flex-center-left();

• Setting up height to 100px:

  @include flex-center-bottom();

Flexbox: flex-center-right()

The flex-center-right file consist of 3 mixins: $flex-center-right-top, $flex-center-right-center and $flex-center-right-bottom. These mixins will set up the following CSS properties: display, justify-content and align-items. Examples of usage:

• Setting up width to 100px:

  @include flex-center-right-center();

• Setting up width to 0px:

  @include flex-center-right-center();

• Setting up height to 100px:

  @include flex-center-right-bottom();