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 |
.text-left |
Align text to the left. |
.text-center |
Align text to the center. |
.text-right |
Align text to the right. |
