Flex-helpers NPM

FlexHelpers

FlexHelpers allows to you use flexbox on your site without know flex properties.

Benefits

You can easily add flexbox display to contenets on your site.
Easier positioning elements relative to each other.
Faster adjusting the elements.
No problems with setting margins.

Requirements
Installation
Features
Documentation

Requirements

Need to use SASS in your Project.

Installation

Download flex-helpers from Github or using npm:

npm install flex-helpers

Add flex-helpers file to your sass files and compile project.

@import "node_modules/flex-helpers/flex-helpers";

Using helpers

When You want use helpers, You should include to your element style, one of helper features.

@include 'feature';

EXAMPLE:

.content {
    @include helper--flex--left--center;
 }

Feature Set

Flex row

Flex row helpers allows to you position component's children in row

- flex row with children positionned horizontally to left:

- flex row with children horizontally centered:

- flex row with children positionned horizontally to right:

- flex row with children positionned horizontally space-between:

- flex row with children positionned horizontally space-around:

Flex column

Flex column helpers allows to you position component's children in column

- flex column with children positionned vertically to top:

- flex column with children vertically centered:

- flex column with children positionned vertically to bottom:

- flex column with children positionned vertically space-between:

- flex column with children positionned vertically space-around:

Inline-flex row helpers allows to you position component's children in row

- inline-flex row with children positionned horizontally to left:

- inline-flex row with children horizontally centered:

- inline-flex row with children positionned horizontally to right:

- inline-flex row with children positionned horizontally space-between:

- inline-flex row with children positionned horizontally space-around:

Inline-flex column

Inline-flex column helpers allows to you position component's children in column

- inline-flex column with children positionned vertically to top:

- inline-flex column with children vertically centered:

- inline-flex column with children positionned vertically to bottom:

- inline-flex column with children positionned vertically space-between:

- inline-flex column with children positionned vertically space-around:

Documentation

helper--flex--left--top // helper--inline-flex--left--top

Sets up component's children to left top corner. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--left--center // helper--inline-flex--left--center

Sets up component's children horizontally to left, vertically to center. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--left--bottom // helper--inline-flex--left--bottom

Sets up component's children to left bottom corner. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--left--stretch // helper--inline-flex--left--stretch

Sets up component's children to left corner and stretch their height to 100% of row's height. Children height property can't be set to any value, otherwise stretch won't work. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--left--space-between // helper--inline-flex--left--space-between

Works only with multirows. Sets up component's children horizontally to left, vertically: 1st row is aligned to top, last row to bottom. If there is more than 2 rows - middle rows are centered, dividing vertical space between them on equal parts.

alt text

helper--flex--left--space-around // helper--inline-flex--left--space-around

Works only with multirows. Sets up component's children horizontally to left, vertically: rows are centered, dividing vertical space between them on equal parts.

alt text

helper--flex--center--top // helper--inline-flex--center--top

Sets up component's children horizontally to center, vertically to top. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--center--center // helper--inline-flex--center--center

Sets up component's children horizontally and vertically both to center. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--center--bottom // helper--inline-flex--center--bottom

Sets up component's children horizontally to center, vertically to bottom. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--center--stretch // helper--inline-flex--center--stretch

Sets up component's children horizontally to center and stretch their height to 100% of row's height. Children height property can't be set to any value, otherwise stretch won't work. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--center--space-between // helper--inline-flex--center--space-between

Works only with multirows. Sets up component's children horizontally to center, vertically: 1st row is aligned to top, last row to bottom. If there is more than 2 rows - middle rows are centered, dividing vertical space between them on equal parts.

alt text

helper--flex--center--space-around // helper--inline-flex--center--space-around

Works only with multirows. Sets up component's children horizontally to center, vertically: rows are centered, dividing vertical space between them on equal parts.

alt text

helper--flex--right--top // helper--inline-flex--right--top

Sets up component's children to right top corner. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--right--center // helper--inline-flex--right--center

Sets up component's children horizontally to right, vertically to center. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--right--bottom // helper--inline-flex--right--bottom

Sets up component's children to right bottom corner. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--right--stretch // helper--inline-flex--right--stretch

Sets up component's children to right corner and stretch their height to 100% of row's height. Children height property can't be set to any value, otherwise stretch won't work. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--right--space-between // helper--inline-flex--right--space-between

Works only with multirows. Sets up component's children horizontally to right, vertically: 1st row is aligned to top, last row to bottom. If there is more than 2 rows - middle rows are centered, dividing vertical space between them on equal parts.

alt text

helper--flex--right--space-around // helper--inline-flex--right--space-around

Works only with multirows. Sets up component's children horizontally to right, vertically: rows are centered, dividing vertical space between them on equal parts.

alt text

helper--flex--space-between--top // helper--inline-flex--space-between--top

Sets up component's children vertically to top, horizontally: 1st child is justified to left, last one is justified to right, all children between the 1st and the last ones are justified center, dividing horizontal space between them on equal parts. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--space-between--center // helper--inline-flex--space-between--center

Sets up component's children vertically to center, horizontally: 1st child is justified to left, last one is justified to right, all children between the 1st and the last ones are justified center, dividing horizontal space between them on equal parts. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--space-between--bottom // helper--inline-flex--space-between--bottom

Sets up component's children vertically to bottom, horizontally: 1st child is justified to left, last one is justified to right, all children between the 1st and the last ones are justified center, dividing horizontal space between them on equal parts. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text

helper--flex--space-between--stretch // helper--inline-flex--space-between--stretch

Sets up component's children horizontally: 1st child is justified to left, last one is justified to right, all children between the 1st and the last ones are justified center, dividing horizontal space between them on equal parts. Vertically stretch childrens' height to 100% of row's height. Children height property can't be set to any value, otherwise stretch won't work. If multirow needed 'flex-wrap: wrap' property has to be added to component styles.

alt text