Alignments

Flexbox and CSS Grid

The alignment classes will help you placing your elements around the page, by combining Flexbox and CSS Grid using the Grix system and the alignment classes.

Horizontal alignment

Class name Description
.fx-left Align the children of a flex element on the left.
.fx-center Center the children of a flex element.
.fx-right Align the children of a flex element on the right.
.self-left Align the element on the left.
.self-center Center the element.
.self-right Align the element on the right.
.left Align the children on the left of the column.
.center Center the children inside of the column.
.right Align the children on the right of the column.
.float-left Align the element on the left.
.float-right Align the element on the right.

Vertical alignment

Class name Description
.vtop Vertically align children elements at the top.
.vcenter Vertically align children elements at the center.
.vbottom Vertically align children elements at the bottom.
.vstretch Automatically fit the children height to the parent height.
.vself-top Vertically align the element at the top.
.vself-center Vertically align the element at the center.
.vself-bottom Vertically align the element at the bottom.
.vself-stretch Automatically fit the height of element to the parent height.

Text alignment

Class name Description
.txt-left Align text to the left.
.txt-center Align text to the center.
.txt-right Align text to the right.