Flex layout
These css classes have been carefully designed to help you create great layouts with ease.
Responsive prefixes explained
| Screen | Prefix | 415px | 576px | 768px | 992px | 1200px | 1400px |
|---|---|---|---|---|---|---|---|
| desktop | d* | X | X | ||||
| tablet | t* | X | X | ||||
| mobile | m* | X | X |
Classes
Directions and Flow
| Class | Applies | Responsive classes |
|---|---|---|
| row | display: flex, flex-wrap: wrap; |
|
| column | display: flex; flex-direction: column; |
|
| no-wrap | flex-wrap: nowrap; | |
| wrap-reverse | flex-wrap: wrap-reverse; | |
| row-reverse | flex-direction: row-reverse; | drow-reverse, trow-reverse, mrow-reverse |
| column-reverse | flex-direction: column-reverse; | dcolumn-reverse, tcolumn-reverse, mcolumn-reverse |
Gap
These are the default sizes, you can adjust them with CSS variables:
:root {
--distance-0: 0;
--distance-1: 0.5rem;
--distance-2: 1rem;
--distance-3: 1.5rem;
--distance-4: 2rem;
--distance-5: 2.5rem;
}
| Class | Applies | Responsive classes |
|---|---|---|
| gap-0 | gap: var(–distance-0); | tgap-0, mgap-0 |
| gap-1 | gap: var(–distance-1); | tgap-1, mgap-1 |
| gap-2 | gap: var(–distance-2); | tgap-2, mgap-2 |
| gap-3 | gap: var(–distance-3); | tgap-3, mgap-3 |
| gap-4 | gap: var(–distance-4); | tgap-4, mgap-4 |
| gap-5 | gap: var(–distance-5); | tgap-5, mgap-5 |
Justify and Align
Top level alignments. Apply these next to row and column.
| Class | Applies | Responsive classes |
|---|---|---|
| justify-center | justify-content: center; | - |
| justify-around | justify-content: space-around; | - |
| justify-evenly | justify-content: space-evenly; | - |
| justify-between | justify-content: space-between; | - |
| justify-start | justify-content: flex-start; | - |
| justify-end | justify-content: flex-end; | - |
| Class | Applies | Responsive classes |
|---|---|---|
| align-center | align-items: center; | - |
| align-start | align-items: flex-start; | - |
| align-end | align-items: flex-end; | - |
| align-stretch | align-items: stretch; | - |
| align-between | align-items: space-between; | - |
| align-around | align-items: space-around; | - |
| align-evenly | align-items: space-evenly; | - |
Align self
Child level alignments. Apply these on an item that is nested within a row or column:
| Class | Applies | Responsive classes |
|---|---|---|
| self-align-stretch | align-self: stretch; | - |
| self-align-center | align-self: center; | - |
| self-align-start | align-self: flex-start; | - |
| self-align-end | align-self: flex-end; | - |
Flex width
These utility classes help you divide the child items with ease. If you have a column direction it will be used as height, else it will be used as width
| Class | Applies | Responsive classes |
|---|---|---|
| f-100 | flex: 0 0 100%; | tf-100, mf-100 |
| f-50 | flex: 0 0 calc(100% / 2); | tf-50, mf-50 |
| f-33 | flex: 0 0 calc(100% / 3); | tf-33 mf-33 |
| f-25 | flex: 0 0 calc(100% / 4); | tf-25, mf-25 |
| f-20 | flex: 0 0 calc(100% / 5); | tf-20, mf-20 |
| f-16 | flex: 0 0 calc(100% / 8); | tf-16, mf-16 |
| f-10 | flex: 0 0 calc(100% / 10); | tf-10, mf-10 |
| f-8 | flex: 0 0 calc(100% / 12); | tf-8, mf-8 |
| f-auto | flex: 1 1 auto; min-width: auto; width: initial; max-width: fit-content; |
tf-auto, mf-auto |
| f-fill | flex: 1; min-width: initial; width: 100%; max-width: initial; |
tf-fill, mf-fill |