Flex

Utilize the power of flexbox to create a wide range of layouts.

Examples

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

Applying classes

Use the Flex or flex classes directly on other stacks to built layouts.
CLASSDESCRIPTION
uk-flex-left
Add this class to align flex items to the left.
uk-flex-center
Add this class to center flex items along the main axis.
uk-flex-right
Add this class to align flex items to the right.
uk-flex-between
Add this class to distribute items evenly, with equal space between the items along the main axis.
uk-flex-around
Add this class to distribute items evenly with equal space on both sides of each item.

Vertical alignment

CLASSDESCRIPTION
uk-flex-stretch
Add this class to expand flex items to fill the height of their parent.
uk-flex-top
Add this class to align flex items to the top.
uk-flex-middle
Add this class to center flex items along the cross axis.
uk-flex-bottom
Add this class to align flex items to the bottom.
Example of uk-flex-middle class added to Grid stack.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.