# Flexbox Styles

| Class | Properties |
| ----- | ---------- |
| flex-row              | flex-direction:  row |
| flex-row-rev          | flex-direction:  row-reverse |
| flex-col              | flex-direction:  column |
| flex-col-rev          | flex-direction:  column-reverse |
| flex-wrap             | flex-wrap:       wrap |
| flex-nowrap           | flex-wrap:       nowrap |
| flex-wrap-rev         | flex-wrap:       wrap-reverse |
| justify-start         | justify-content: flex-start |
| justify-end           | justify-content: flex-end |
| justify-center        | justify-content: center |
| justify-between       | justify-content: space-between |
| justify-around        | justify-content: space-around |
| justify-evenly        | justify-content: space-evenly |
| align-items-start     | align-items:     flex-start |
| align-items-end       | align-items:     flex-end |
| align-items-center    | align-items:     center |
| align-items-baseline  | align-items:     baseline |
| align-items-stretch   | align-items:     stretch |
| align-content-start   | align-content:   flex-start |
| align-content-end     | align-content:   flex-end |
| align-content-center  | align-content:   center |
| align-content-between | align-content:   space-between |
| align-content-around  | align-content:   space-around |
| align-content-stretch | align-content:   stretch |
| align-self-auto       | align-self:      auto |
| align-self-start      | align-self:      flex-start |
| align-self-end        | align-self:      flex-end |
| align-self-center     | align-self:      center |
| align-self-baseline   | align-self:      baseline |
| align-self-stretch    | align-self:      stretch |


The following numbers can be used with the class names below:
* 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
* Example: the `flex-grow-3` class name will produce `flex-grow: 3`

| Class | Properties |
| ----- | ---------- |
| flex-order-⟨num⟩ | flex-order: ⟨num⟩ |
| flex-grow-⟨num⟩ | flex-grow: ⟨num⟩ |
| flex-shrink-⟨num⟩ | flex-shrink: ⟨num⟩ |