Flex

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

Flex stack will work best with inline stacks like the Card. We nay also use the classes listed in the Flex stack into other stacks, so to achieve the desired layout. For example the classes uk-flex uk-flex-middle will center the contents vertically on a container.

Item 1
Item 2
Item 3

Horizontal alignment

These options define the horizontal alignment of flex items and distribute the space between them. Below is an example of flex-between:
Item 1
Item 2
Item 3

Vertical align

These options define the vertical alignment of flex items and distribute the space between them. Below is an example of flex-middle:
Item 1
Item 2
...
Item 3
...
...

Item order

By default flex items are laid out according to the source order. To display a certain item as the first or last one, just add one of these classes at the custom class field:
CLASS DESCRIPTION
uk-flex-first
Displays the item as the first one.
uk-flex-last
Displays the item as the last one.
uk-flex-first@s
uk-flex-last@s
Affects device widths of 640px and higher.
uk-flex-first@m
uk-flex-last@m
Affects device widths of 960px and higher.
uk-flex-first@l
uk-flex-last@l
Affects device widths of 1200px and higher.
uk-flex-first@xl
uk-flex-last@xl
Affects device widths of 1600px and higher.
Item 1
Item 2
Item 3

Wrap

By default flex items are fit into one line and run from left to right. Use one of the wrap options to modify the behaviour of wrapping flex items.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Flex and Grid

Flex can also be combined with Grid, using the uk-flex-middle class at the advanced tab.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.