sassyons
Version:
Inspired by Tachyons
46 lines (41 loc) • 2.1 kB
Markdown
# 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⟩ |