Skip to content

Utilities: Flexbox

Jump to bottom
Liviu Voica edited this page Feb 4, 2021 · 1 revision

TABLE OF CONTENTS:

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();
Clone this wiki locally