Flex Box

Uses u-display--flex

Align Content

Example

Start
End
Center
Stretch
around

Classes

Format: u-align-content--alignment

This utlitiy is responsive and can be used like class="u-align-content--alignment@md"

Modifiers Description Values
alignment Where in flex-box to align, relative to extra space start, end, center, stretch, around

Align Items

Example

Start
End
Center
Stretch
around

Classes

Format: u-align-items--alignment

This utlitiy is responsive and can be used like class="u-align-items--alignment@md"

Modifiers Description Values
alignment Where in flex-box to align items start, end, center, stretch, baseline

Align Self

Example

Start
End
Center
Stretch

Classes

Format: u-align-self--alignment

This utlitiy is responsive and can be used like class="u-align-self--alignment@md"

Modifiers Description Values
alignment Where in flex-box to align specific element start, end, center, stretch

Flex Direction

Example

Row 1
Row 2
Column 1
Column 2
Row reverse 1
Row reverse 2
Column reverse 1
Column reverse 2

Classes

Format: u-flex-direction--axis--order

This utlitiy is responsive and can be used like class="u-flex-direction--axis--order@md"

Modifiers Description Values
axis The direction of the flex, either horizontal or vertical row, column
order Reverses order reverse

Flex Grow

Example

Grow 0
Grow 1

Classes

Format: u-flex-grow--priority

This utlitiy is responsive and can be used like class="u-flex-grow--priority@md"

Modifiers Description Values
priority The priority in which the elements grow 0, 1

Flex Shrink

Example

Width 100%
Shrink 0
Shrink 1

Classes

Format: u-flex-shrink--priority

This utlitiy is responsive and can be used like class="u-flex-shrink--priority@md"

Modifiers Description Values
priority The priority in which the elements shrink 0, 1

Flex Wrap

Example

Default breaks line if needed

Default 1
Default 2
Default 3

No-wrap prevents flex from breaking line

No-wrap 1
No-wrap 2
No-wrap 3

Flex wrap-reverse acts like default value just reverse order

Reverse 1
Reverse 2
Reverse 3

Classes

Format: u-flex-wrap--break

This utlitiy is responsive and can be used like class="u-flex-wrap--break@md"

Modifiers Description Values
break How to break overflowing items nowrap, wrap-reverse

Justify Content

Example

Start 1
Start 2
Start 3
End 1
End 2
End 3
Center 1
Center 2
Center 3
Space Between 1
Space Between 2
Space Between 3
Space Around 1
Space Around 2
Space Around 3
Space Evenly 1
Space Evenly 2
Space Evenly 3

Classes

Format: u-justify-content--alignment

This utlitiy is responsive and can be used like class="u-justify-content--alignment@md"

Modifiers Description Values
alignment How to distribute items inside flex-box start, end, center, space-between, space-around, space-evenly

Order

Example

0
1
2
3
4
5
6
7
8
9
10
11
12

Classes

Format: u-order--item-order

This utlitiy is responsive and can be used like class="u-order--item-order@md"

Modifiers Description Values
item-order Where in order the item is 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12

Gap

Example

Classes

Format: u-flex--gridgap

Modifiers Description Values