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. Note that its functionality will be enhanced fundamentally in the future, while right now it is mainly used to easily align objects.

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>

Modifiers

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

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.

Example

Box
Box
Box

Markup

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