Styling/ Layout

Utility classes to provide an easy way to adjust the layout of the elements.
Utilities for all things related to size.

Position

Top / Right / Bottom / Left

Format: top-{value} / right-{value} / bottom-{value} / left-{value}

Uses same length variables mentioned at Styling/Size.

Flex

Flex Direction

Flex Grow & Shrink

Values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15.

Align Items

Class Properties
items-auto align-items: auto
items-start align-items: flex-start
items-end align-items: flex-end
items-center align-items: center
items-stretch align-items: stretch

Justify Content

Class Properties
justify-start justify-content: flex-start
justify-center justify-content: center
justify-end justify-content: flex-end
justify-between justify-content: space-between
justify-around justify-content: space-around
justify-evenly justify-content: space-evenly

Align Self

Class Properties
self-auto align-self: auto
self-start align-self: flex-start
self-end align-self: flex-end
self-center align-self: center
self-stretch align-self: stretch

Align Content

Class Properties
align-auto align-content: auto
align-start align-content: flex-start
align-end align-content: flex-end
align-center align-content: center
align-stretch align-content: stretch