Flex
These utilities provide a way to manage flex layout using classes. A good understanding of CSS flex layout is needed to use them properly. Get an overview of the CSS flex rules with The Flexbox cheatsheet.
Enable flex behaviour
Block
Turn the current element as block flex container.
Usage
u-flex(@[breakpoint])
Examples
A
B
C
u-flex
Inline
Turn the current element as inline flex container.
Usage
u-flex-inline(@[breakpoint])
Examples
An inline flex elment
A
B
C
surrounded by text.
u-flex-inline
Direction
Row
Sets a horizontal direction (this is the browser default).
Usage
u-flex-row(@[breakpoint])
Examples
A
B
C
u-flex u-flex-row
Row reverse
Sets a horizontal direction but starting from the opposite side.
Usage
u-flex-row-reverse(@[breakpoint])
Examples
A
B
C
u-flex u-flex-row-reverse
Column
Sets a vertical direction.
Usage
u-flex-col(@[breakpoint])
Examples
A
B
C
u-flex u-flex-col
Column reverse
Sets a vertical direction but starting from the opposite side.
Usage
u-flex-col-reverse(@[breakpoint])
Examples
A
B
C
u-flex u-flex-col-reverse