Justify Content
| Class | CSS Property | Description |
|---|---|---|
Ajc-start | justify-content: flex-start; | Align items at the start of the container |
Ajc-center | justify-content: center; | Center items horizontally within the container |
Ajc-end | justify-content: flex-end; | Align items at the end of the container |
Ajc-between | justify-content: space-between; | Distribute items with space between them |
Ajc-around | justify-content: space-around; | Distribute items with space around them |
Ajc-evenly | justify-content: space-evenly; | Distribute items with equal space around them |
Align Items
| Class | CSS Property | Description |
|---|---|---|
Aji-start | align-items: flex-start; | Align items at the start of the container |
Aji-center | align-items: center; | Center items vertically within the container |
Aji-end | align-items: flex-end; | Align items at the end of the container |
Aji-baseline | align-items: baseline; | Align items along the baseline of the container |
Aji-stretch | align-items: stretch; | Stretch items to fill the height of the container |
Align Content
| Class | CSS Property | Description |
|---|---|---|
Aac-start | align-content: flex-start; | Align wrapped lines at the start of the container |
Aac-center | align-content: center; | Center wrapped lines horizontally within the container |
Aac-end | align-content: flex-end; | Align wrapped lines at the end of the container |
Aac-between | align-content: space-between; | Distribute wrapped lines with space between them |
Aac-around | align-content: space-around; | Distribute wrapped lines with space around them |
Aac-evenly | align-content: space-evenly; | Evenly distribute wrapped lines within the container |
Align Self
| Class | CSS Property | Description |
|---|---|---|
Ajc-self-start | align-self: flex-start; | Override self-alignment to align at start |
Ajc-self-center | align-self: center; | Override self-alignment to center itself |
Ajc-self-end | align-self: flex-end; | Override self-alignment to align at end |