Flex Hero is a simple CSS library to exploit flexbox layouts.

This is NOT a grid layout system or a complete CSS framework. On contrary, Flex Hero can be used with any other CSS framework, like Bootstrap.

Flex Hero is availabe on Bower and NPM:

bower install flex-hero
npm install flex-hero

Each class of the Flex Hero library starts with the fh- prefix.

This class shall be used as a layout container. It enables the display: flex property.

Same as fh-container, but as an inline container.

Expands the element to a 100% in width and height.

Sets the direction of elements inside a container to row. It shall be applied to a container.

Sets the direction of elements inside a container to column. It shall be applied to a container.

Same as fh-row, but using a reverse order.

Same as fh-column, but using a reverse order.

Allows the container to use multiple lines to allocate space for the items (left to right).

(default) Forces the container to use a single line to allocate space for the items.

Allows the container to use multiple lines to allocate space for the items (right to left).

Defines the alignment along the main axis such as the items are packed toward the start line.

Defines the alignment along the main axis such as the items are packed toward the end line.

Defines the alignment along the main axis such as the items are centered along the line.

Defines the alignment along the main axis such as the items are evenly distributed in the line; first item is on the start line, last item on the end line.

Defines the alignment along the main axis such as the items are evenly distributed in the line with equal space around them.

Each item will stretch in hight if the class fh-row is present or in width if the class fh-column is present.

Cross-start margin edge of the items is placed on the cross-start line.

Cross-end margin edge of the items is placed on the cross-end line.

Items are centered in the cross-axis.

Items are aligned such as their baselines align.

Same as fh-align-stretch, this class can be applied to a single item, in order to override the container behavior.

Same as fh-align-start, this class can be applied to a single item, in order to override the container behavior.

Same as fh-align-end, this class can be applied to a single item, in order to override the container behavior.

Same as fh-align-center, this class can be applied to a single item, in order to override the container behavior.

Same as fh-align-baseline, this class can be applied to a single item, in order to override the container behavior.

This class can be allied to an item, and it will set the flex property to 1.

This class set the size of the element to 1.

This class set the size of the element to 2.

This class set the size of the element to 3.

This class set the size of the element to 4.

This class set the size of the element to 5.

This class set the size of the element to 6.

This class set the size of the element to 7.

This class set the size of the element to 8.

This class adds margins to the element.