# Flex

{% hint style="info" %}
Since `1.8.0`
{% endhint %}

### Class

```css
.flex
```

```css
.flex--{wrap | nowrap | reverse}
```

### Code Sample

#### .flex

```markup
<div class="flex">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```

#### .flex--wrap

```markup
<div class="flex--wrap">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```

#### .flex--nowrap

```markup
<div class="flex--nowrap">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```

#### .flex--reverse

```markup
<div class="flex--reverse">
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-1</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-2</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-3</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-4</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-5</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-6</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-7</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-8</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-9</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-10</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-11</div>
    <div class="column--1 bg--gainsboro rounded--6 pa--1">Column-12</div>
</div>
```