flex.md

_flex.scss

File includes mixins which help using flex features in easiest way

List of content:

• Mixin flex
• Mixin inline-flex

Mixin flex

Description

Mixin which helps to add display: flex; property to the class, alternatively set flex-direction, align-items, justify-content and flex-wrap properties.

Parameters

• $direction - defines the direction of items in the flex container
• $align - defines how flex items are laid out along the cross axis
• $justify - defines the alignment along the main axis
• $wrap - defines how flex items will wrap onto multiple lines

Usage:

Case 1

Assign property display: flex; to the class without any extra properties.

.exampleFlex {
   @include flex();
}

Case 2

Assign display: flex property to the class and define the direction of items in the flex container.

.exampleFlex {
    @include flex($direction: column);
}

Case 3

Assign display: flex property to the class and define how flex items are laid out along the cross axis.

.exampleFlex {
   @include flex($align: flex-end);
}

Case 4

Assign display: flex property to the class and defines alignment of flex items along the main axis.

.exampleFlex {
   @include flex($justify: space-between);
}

Case 5

Assign display: flex property to the class and wrap flex items onto multiple lines.

.exampleFlex {
   @include flex($wrap: wrap);
}

Mixin inline-flex

Description

Mixin which helps to add display: inline-flex; property to the class, alternatively set flex-direction, align-items, justify-content and flex-wrap properties.

Parameters

• $direction - defines the direction of items in the flex container
• $align - defines how flex items are laid out along the cross axis
• $justify - defines the alignment along the main axis
• $wrap - defines how flex items will wrap onto multiple lines

Usage:

Case 1

Assign property display: inline-flex; to the class without any extra properties.

.exampleInlineFlex {
   @include inline-flex;
}

Case 2

Assign display: inline-flex property to the class and define the direction of items in the flex container.

.exampleInlineFlex {
    @include inline-flex($direction: column);
}

Case 3

Assign display: inline-flex property to the class and define how flex items are laid out along the cross axis.

.exampleInlineFlex {
   @include inline-flex($align: flex-end);
}

Case 4

Assign display: inline-flex property to the class and defines alignment of flex items along the main axis.

.exampleInlineFlex {
   @include inline-flex($justify: space-between);
}

Case 5

Assign display: inline-flex property to the class and wrap flex items onto multiple lines.

.exampleInlineFlex {
   @include inline-flex($wrap: wrap);
}