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.

ClassDescription
.uk-flexCreate the flex container and behave like a block element.
.uk-flex-inlineCreate the flex container and behave like an inline element.
<div class="uk-flex">
  <div></div>
</div>
Copy to clipboard
  • 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.

ClassDescription
.uk-flex-leftAdd this class to align flex items to the left.
.uk-flex-centerAdd this class to center flex items along the main axis.
.uk-flex-rightAdd this class to align flex items to the right.
.uk-flex-betweenAdd this class to distribute items evenly, with equal space between the items along the main axis.
.uk-flex-aroundAdd 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>
Copy to clipboard
  • 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>
Copy to clipboard
  • 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.

ClassDescription
.uk-flex-stretchAdd this class to expand flex items to fill the height of their parent.
.uk-flex-topAdd this class to align flex items to the top.
.uk-flex-middleAdd this class to center flex items along the cross axis.
.uk-flex-bottomAdd 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>
Copy to clipboard
  • 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.

ClassDescription
.uk-flex-rowAdd this class to lay out flex items as horizontal rows.
.uk-flex-row-reverseAdd this class to lay out flex items from right to left.
.uk-flex-columnAdd this class to lay out flex items as vertical columns.
.uk-flex-column-reverseAdd 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>
Copy to clipboard
  • 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.

ClassDescription
.uk-flex-wrapAdd this class to make flex items wrap into another line when they no longer fit their container.
.uk-flex-wrap-reverseAdd this class to change the items’ direction so that they run from right to left.
.uk-flex-nowrapAdd 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.

ClassDescription
.uk-flex-wrap-stretchAdd this class, so that item lines stretch to take up the remaining space
.uk-flex-wrap-betweenAdd 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-aroundAdd this class to distribute lines evenly with equal space at the top and bottom of each row.
.uk-flex-wrap-topAdd this class to align multi-line flex items to the top.
.uk-flex-wrap-middleAdd this class to vertically centered multirow flex items.
.uk-flex-wrap-bottomAdd this class to align multi-line flex items to the bottom.
<div class="uk-flex uk-flex-wrap uk-flex-wrap-around"></div>
Copy to clipboard
  • 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.

ClassDescription
.uk-flex-firstDisplays the item as the first one.
.uk-flex-lastDisplays 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>
Copy to clipboard
  • 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.

ClassDescription
.uk-flex-initialThe box’s size is determined by its content, but shrinks.
.uk-flex-noneThe box’s size is determined by its content.
.uk-flex-autoThe space is allocated considering the item’s content.
.uk-flex-1The 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.

Copy to clipboard
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

    Image
  • <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>