---
layout: docs
title: Flex
description: null
---

## Flex Utilities

| Class                 | Description                                                                              |
| --------------------- | ---------------------------------------------------------------------------------------- |
| `flex-justify`        | Applies `display: flex; justify-content: space-between;` to element                      |
| `flex-justify-center` | Applies `display: flex; align-items: center; justify-content: space-between;` to element |

## Flex Properties

| Class                           | Description                                                                   |
| ------------------------------- | ----------------------------------------------------------------------------- |
| `flex`                          | Applies `display: flex;` to element                                           |
| `inline-flex`                   | Applies `display: inline-flex;` to element                                    |
| `flex-wrap`                     | Applies `flex-wrap: wrap;` to element                                         |
| `flex-nowrap`                   | Applies `flex-wrap: nowrap;` to element                                       |
| `flex-row`                      | Applies `flex-direction: row;` to element                                     |
| `flex-column`                   | Applies `flex-direction: column;` to element                                  |
| `flex-1`                        | Applies `flex: 1 1 0px;` to element (Note: `0px` used for IE support)         |
| `flex-auto`                     | Applies `flex: auto;` to element. Equal to `flex: 1 1 auto;` as per the spec. |
| `flex-none`                     | Applies `flex: none;` to element. Equal to `flex: 0 0 auto;` as per the spec. |
| `flex-1-1-auto`                 | Applies `flex: 1 1 auto;` to element                                          |
| `flex-1-0-auto`                 | Applies `flex: 1 0 auto;` to element                                          |
| `flex-0-1-auto`                 | Applies `flex: 0 1 auto;` to element                                          |
| `flex-0-0-auto`                 | Applies `flex: 0 0 auto;` to element                                          |
| `justify-content-flex-start`    | Applies `justify-content: flex-start;` to element                             |
| `justify-content-flex-end`      | Applies `justify-content: flex-end;` to element                               |
| `justify-content-center`        | Applies `justify-content: center;` to element                                 |
| `justify-content-space-between` | Applies `justify-content: space-between;` to element                          |
| `justify-content-space-around`  | Applies `justify-content: space-around;` to element                           |
| `align-content-flex-start`      | Applies `align-content: flex-start;` to element                               |
| `align-content-flex-end`        | Applies `align-content: flex-end;` to element                                 |
| `align-content-center`          | Applies `align-content: center;` to element                                   |
| `align-content-space-between`   | Applies `align-content: space-between;` to element                            |
| `align-content-space-around`    | Applies `align-content: space-around;` to element                             |
| `align-content-stretch`         | Applies `align-content: stretch;` to element                                  |
| `align-items-flex-start`        | Applies `align-items: flex-start;` to element                                 |
| `align-items-flex-end`          | Applies `align-items: flex-end;` to element                                   |
| `align-items-center`            | Applies `align-items: center;` to element                                     |
| `align-items-baseline`          | Applies `align-items: baseline;` to element                                   |
| `align-items-stretch`           | Applies `align-items: stretch;` to element                                    |
| `align-self-flex-start`         | Applies `align-self: flex-start;` to element                                  |
| `align-self-flex-end`           | Applies `align-self: flex-end;` to element                                    |
| `align-self-center`             | Applies `align-self: center;` to element                                      |
| `align-self-baseline`           | Applies `align-self: baseline;` to element                                    |
| `align-self-stretch`            | Applies `align-self: stretch;` to element                                     |