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
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
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
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
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
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
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.
