# 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

Box
Box
Box

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

Box
Box
Box

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

1
2
3

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

1
2
3
4
5
6

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

1
2
3

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