Flex

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.

Usage

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.

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

Item 1

Item 2

Item 3

<div class="uk-flex">
  <div class="uk-card uk-card-body uk-card-default">Item 1</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">Item 2</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">Item 3</div>
</div>

Horizontal alignment

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.

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

Item 1

Item 2

Item 3

<div class="uk-flex uk-flex-center">
  <div class="uk-card uk-card-body uk-card-default">Item 1</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">Item 2</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">Item 3</div>
</div>

<div class="uk-flex-center@m uk-flex-right@l uk-flex">
  <div></div>
</div>

Item 1

Item 2

Item 3

<div class="uk-flex-center@m uk-flex-right@l uk-flex">
  <div class="uk-card uk-card-body uk-card-default">Item 1</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">Item 2</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">Item 3</div>
</div>

Vertical alignment

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.

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

Item 1

Item 2
…

Item 3
…
…

<div class="uk-flex uk-flex-middle uk-text-center">
  <div class="uk-card uk-card-body uk-card-default">Item 1</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">
    Item 2<br />…
  </div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">
    Item 3<br />…<br />…
  </div>
</div>

Direction modifiers

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.

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

Item 1

Item 2

Item 3

<div class="uk-flex uk-flex-column uk-width-1-3">
  <div class="uk-card uk-card-body uk-card-default">Item 1</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-top">Item 2</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-top">Item 3</div>
</div>

Wrap modifiers

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.

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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

<div
  class="uk-background-muted uk-flex uk-flex-wrap uk-flex-wrap-around uk-height-medium"
>
  <div class="uk-card uk-card-body uk-card-default uk-card-small uk-width-1-3">
    Item 1
  </div>
  <div
    class="uk-card uk-card-body uk-card-default uk-card-small uk-margin-left uk-width-1-2"
  >
    Item 2
  </div>
  <div class="uk-card uk-card-body uk-card-default uk-card-small uk-width-1-3">
    Item 3
  </div>
  <div
    class="uk-card uk-card-body uk-card-default uk-card-small uk-margin-left uk-width-1-3"
  >
    Item 4
  </div>
  <div class="uk-card uk-card-body uk-card-default uk-card-small uk-width-1-2">
    Item 5
  </div>
  <div
    class="uk-card uk-card-body uk-card-default uk-card-small uk-margin-left uk-width-1-3"
  >
    Item 6
  </div>
</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-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.

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

Item 1

Item 2

Item 3

<div class="uk-flex">
  <div class="uk-card uk-card-body uk-card-default uk-flex-last uk-margin-left">
    Item 1
  </div>
  <div class="uk-card uk-card-body uk-card-default uk-flex-first">Item 2</div>
  <div class="uk-card uk-card-body uk-card-default uk-margin-left">Item 3</div>
</div>

Item dimensions

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.

Flex and grid

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.

<div class="uk-flex-middle" uk-grid>
  <div class="uk-width-2-3@m">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna.
    </p>
  </div>
  <div class="uk-width-1-3@m uk-flex-first">
    <img src="/images/light.jpg" width="1800" height="1200" alt="Image" />
  </div>
</div>

On This Page
Usage
Horizontal alignment
Vertical alignment
Direction modifiers
Wrap modifiers
Item order
Item dimensions
Flex and grid

Request Web Components

Franken UI is an independent project. Help support it and expand its free component library.

Reach out