# Flex

Helper classes for using [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes). These classes are refer to the bootstrap. See [Link](https://getbootstrap.com/docs/4.0/utilities/flex/).

## Flex Container

### flex-direction

- `.flex-row`
- `.flex-column`
- `.flex-row-reverse`
- `.flex-column-reverse`

### flex-wrap

- `.flex-wrap`
- `.flex-nowrap`
- `.flex-wrap-reverse`

### flex helpers

- `.flex-fill`
- `.flex-grow-0`
- `.flex-grow-1`
- `.flex-shrink-0`
- `.flex-shrink-1`

### justify-content

- `.justify-content-start`
- `.justify-content-end`
- `.justify-content-center`
- `.justify-content-between`
- `.justify-content-around`

### align-items

- `.align-items-start`
- `.align-items-end`
- `.align-items-center`
- `.align-items-baseline`
- `.align-items-stretch`

### align-content

- `.align-content-start`
- `.align-content-end`
- `.align-content-center`
- `.align-content-between`
- `.align-content-around`
- `.align-content-stretch`

## Flex Item

### order

- `.order-first`
- `.order-0`
- `.order-1`
- `.order-2`
- `.order-3`
- `.order-4`
- `.order-5`
- `.order-last`

### align-self

- `.align-self-auto`
- `.align-self-start`
- `.align-self-end`
- `.align-self-center`
- `.align-self-baseline`
- `.align-self-stretch`