Flex

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

This component uses Flexbox, a concept that is still quite new but extremely powerful for creating layouts.


Usage

To apply this component, just add the .uk-flex class to a <div> element. This will create the flex container. By default, all flex items will be aligned to the left and equally matched in height and width.

Example

Box
Box
Box

Markup

<div class="uk-flex">
    <div>...</div>
</div>

Flex inline

By default, the flex container is displayed as a block element. To apply the behavior of an inline element while still laying out its content according to the flexbox model, use the .uk-flex-inline class instead of uk-flex.


Modifiers

You can add a number of different classes to modify the flex behavior.

Alignment

These classes define the horizontal and vertical alignment of flex items and distribute the space between them.

Class Description
.uk-flex-center Add this class to center flex items horizontally.
.uk-flex-right Add this class to align flex items to the right.
.uk-flex-top Add this class to align flex items to the top.
.uk-flex-middle Add this class to vertically center flex items.
.uk-flex-bottom Add this class to align flex items to the bottom.
.uk-flex-space-between Add this class to distribute items evenly, with the first item at the beginning and last item at the end of the main axis.
.uk-flex-space-around Add this class to distribute items evenly with equal space on both sides of each item.

Example

Box
Box
Box

Markup

<div class="uk-flex uk-flex-middle uk-flex-space-between">...</div>

Direction

These classes define the axis flex items placed on and their direction. By default, items run horizontally from left to right.

Class Description
.uk-flex-row-reverse Add this class to lay out flex items from right to left.
.uk-flex-column Add this class to lay out flex items as vertical columns.
.uk-flex-column-reverse Add this class to lay out flex items from bottom to top.

Example

1
2
3

Markup

<div class="uk-flex uk-flex-column uk-flex-column-reverse">...</div>

Wrap

By default, flex items fit themselves into one row. Add the .uk-flex-wrap class, so that the items wrap into another row when they no longer fit the viewport. To change the items' direction so that they run from right to left, add the .uk-flex-wrap-reverse class. The following classes modify the alignment of wrapping flex items. To force the flex items into one row, just add the .uk-flex-nowrap class.

Class Description
.uk-flex-wrap-top Add this class to align multirow flex items to the top.
.uk-flex-wrap-middle Add this class to vertically center multirow flex items.
.uk-flex-wrap-bottom Add this class to align multiline flex items to the bottom.
.uk-flex-wrap-space-between Add this class to distribute item rows evenly, with the first row at the top and last row at the bottom of the container.
.uk-flex-wrap-space-around Add this class to distribute rows evenly with equal space at the top and bottom of each row.

Example

1
2
3
4
5
6

Markup

<div class="uk-flex uk-flex-wrap uk-flex-wrap-reverse uk-flex-wrap-space-around">...</div>

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.

Class Description
.uk-flex-order-first Displays the item as the first one.
.uk-flex-order-last Displays the item as the last one.
.uk-flex-order-first-small
.uk-flex-order-last-small
Affects device widths of 480px and higher.
.uk-flex-order-first-medium
.uk-flex-order-last-medium
Affects device widths of 768px and higher.
.uk-flex-order-first-large
.uk-flex-order-last-large
Affects device widths of 960px and higher.
.uk-flex-order-first-xlarge
.uk-flex-order-last-xlarge
Affects device widths of 1220px and higher.

Example

1
2
3

Markup

<div class="uk-flex">
   <div class="uk-flex-order-first">...</div>
</div>

Item dimensions

To determine how much space a flex item should take up, add one of the following classes to the item.

Class Description
.uk-flex-item-none The box's size is determined by its content.
.uk-flex-item-auto The space is allocated considering the item's content.
.uk-flex-item-1 The space is allocated solely based on flex.

Flex and grid

The Flex component can be combined with a grid from the Grid component.

Example

Placeholder

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.