We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Utilize the power of flexbox to create a wide range of layouts.
The Flex component has an essential role in building layouts in UIkit. A lot of components, for example the Grid as well as horizontal navigations, like the Navbar, Subnav, Breadcrumb, Pagination, Tab and Dotnav are built with flexbox and can be used together with the utility classes from this component.
To apply the flexbox layout model, use one of the following classes. By default, all flex items are aligned to the left, as wide as their content and matched in height.
Class | Description |
---|---|
.uk-flex | Create the flex container and behave like a block element. |
.uk-flex-inline | Create the flex container and behave like an inline element. |
These classes define the horizontal alignment of flex items and distribute the space between them. Add one or more of them to the flex container in order to configure the alignments of the flex items. By default, flex items are aligned to the left as does the .uk-flex-left
class.
Class | Description |
---|---|
.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. |
.uk-flex-left@s .uk-flex-center@s .uk-flex-right@s .uk-flex-between@s .uk-flex-around@s | Only affects device widths of 640px and higher. |
.uk-flex-left@m .uk-flex-center@m .uk-flex-right@m .uk-flex-between@m .uk-flex-around@m | Only affects device widths of 768px and higher. |
.uk-flex-left@l .uk-flex-center@l .uk-flex-right@l .uk-flex-between@l .uk-flex-around@l | Only affects device widths of 1024px and higher. |
.uk-flex-left@xl .uk-flex-center@xl .uk-flex-right@xl .uk-flex-between@xl .uk-flex-around@xl | Only affects device widths of 1280px and higher. |
These classes define the vertical alignment of flex items. By default, flex items fill the height of their container as does the .uk-flex-stretch
class.
Class | Description |
---|---|
.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. |
.uk-flex-stretch@s .uk-flex-top@s .uk-flex-middle@s .uk-flex-bottom@s | Only affects device widths of 640px and higher. |
.uk-flex-stretch@m .uk-flex-top@m .uk-flex-middle@m .uk-flex-bottom@m | Only affects device widths of 768px and higher. |
.uk-flex-stretch@l .uk-flex-top@l .uk-flex-middle@l .uk-flex-bottom@l | Only affects device widths of 1024px and higher. |
.uk-flex-stretch@xl .uk-flex-top@xl .uk-flex-middle@xl .uk-flex-bottom@xl | Only affects device widths of 1280px and higher. |
These classes define the axis that flex items are placed on and their direction. By default, items run horizontally from left to right as does the .uk-flex-row
class.
Class | Description |
---|---|
.uk-flex-row | Add this class to lay out flex items as horizontal rows. |
.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. |
.uk-flex-row@s .uk-flex-column@s | Only affects device widths of 640px and higher. |
.uk-flex-row@m .uk-flex-column@m | Only affects device widths of 768px and higher. |
.uk-flex-row@l .uk-flex-column@l | Only affects device widths of 1024px and higher. |
.uk-flex-row@xl .uk-flex-column@xl | Only affects device widths of 1280px and higher. |
By default, flex items are fit into one line and run from left to right. Add one of these classes to modify the behavior of wrapping flex items.
Class | Description |
---|---|
.uk-flex-wrap | Add this class to make flex items wrap into another line when they no longer fit their container. |
.uk-flex-wrap-reverse | Add this class to change the items’ direction so that they run from right to left. |
.uk-flex-nowrap | Add this class to force the flex items into one line. This is the default behavior. |
The following classes modify the alignment of wrapping flex items.
Class | Description |
---|---|
.uk-flex-wrap-stretch | Add this class, so that item lines stretch to take up the remaining space |
.uk-flex-wrap-between | Add this class to distribute item lines evenly, with the first row at the top and the last row at the bottom of the container. |
.uk-flex-wrap-around | Add this class to distribute lines evenly with equal space at the top and bottom of each row. |
.uk-flex-wrap-top | Add this class to align multi-line flex items to the top. |
.uk-flex-wrap-middle | Add this class to vertically centered multirow flex items. |
.uk-flex-wrap-bottom | Add this class to align multi-line flex items to the bottom. |
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-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 | Only affects device widths of 640px and higher. |
.uk-flex-first@m .uk-flex-last@m | Only affects device widths of 768px and higher. |
.uk-flex-first@l .uk-flex-last@l | Only affects device widths of 1024px and higher. |
.uk-flex-first@xl .uk-flex-last@xl | Only affects device widths of 1280px and higher. |
To determine how much space a flex item should take up, add one of the following classes to the item. By default, items determine their size by their content, but are allowed to shrink.
Class | Description |
---|---|
.uk-flex-initial | The box’s size is determined by its content, but shrinks. |
.uk-flex-none | The box’s size is determined by its content. |
.uk-flex-auto | The space is allocated considering the item’s content. |
.uk-flex-1 | The space is allocated solely based on flex. |
.uk-flex-initial@s .uk-flex-none@s .uk-flex-1@s | Only affects device widths of 640px and higher. |
.uk-flex-initial@m .uk-flex-none@m .uk-flex-1@m | Only affects device widths of 768px and higher. |
.uk-flex-initial@l .uk-flex-none@l .uk-flex-1@l | Only affects device widths of 1024px and higher. |
.uk-flex-initial@xl .uk-flex-none@xl .uk-flex-1@xl | Only affects device widths of 1280px and higher. |
The Flex component can be combined with a grid from the Grid component.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.