Flexbox
Ce contenu n’est pas encore disponible dans votre langue.
This page lists all Flexbox CSS custom properties and utility classes available in the OxyProps Framework
Flex Directions
link Flex Directions| Description | Utility Class |
|---|---|
| Row | o-flex-row |
| Column | o-flex-col |
| Row Reverse | o-flex-row-rev |
| Column Reverse | o-flex-col-rev |
Flex Wrapping
link Flex Wrapping| Description | Utility Class |
|---|---|
| Wrap | o-wrap |
| Wrap Reverse | o-wrap-rev |
| No Wrap | o-nowrap |
Flex Alignment main axis
link Flex Alignment main axis| Description | Utility Class |
|---|---|
| Justify Content Start | o-flex-start |
| Justify Content End | o-flex-end |
| Justify Content Center | o-flex-center |
| Justify Content Space Between | o-flex-between |
| Justify Content Space Around | o-flex-around |
| Justify Content Space Evenly | o-flex-evenly |
Flex Alignment cross axis
link Flex Alignment cross axis| Description | Utility Class |
|---|---|
| Align Items Start | o-items-start |
| Align Items End | o-items-end |
| Align Items Center | o-items-center |
| Align Items Baseline | o-items-baseline |
| Align Items Stretch | o-items-stretch |
Flex Alignment self
link Flex Alignment self| Description | Utility Class |
|---|---|
| Align Self Start | o-self-start |
| Align Self End | o-self-end |
| Align Self Center | o-self-center |
| Align Self Baseline | o-self-baseline |
| Align Self Stretch | o-self-stretch |
Flex Alignment content
link Flex Alignment content| Description | Utility Class |
|---|---|
| Align Content Start | o-content-start |
| Align Content End | o-content-end |
| Align Content Center | o-content-center |
| Align Content Space Between | o-content-between |
| Align Content Space Around | o-content-around |
| Align Content Space Evenly | o-content-evenly |
| Align Content Stretch | o-content-stretch |
Flex Order
link Flex Order| Description | Utility Class |
|---|---|
| First | o-first |
| Last | o-last |
Flex Grow
link Flex Grow| Description | Utility Class |
|---|---|
| Grow 0 | o-grow-0 |
| Grow 1 | o-grow-1 |
| Grow 2 | o-grow-2 |
| Grow 3 | o-grow-3 |
Flex Shrink
link Flex Shrink| Description | Utility Class |
|---|---|
| Shrink 0 | o-shrink-0 |
| Shrink 1 | o-shrink-1 |
| Shrink 2 | o-shrink-2 |
| Shrink 3 | o-shrink-3 |
Flex Basis
link Flex Basis| Description | Utility Class |
|---|---|
| Sets flex basis to Content 1 | o-basis-content-1 |
| Sets flex basis to Content 2 | o-basis-content-2 |
| Sets flex basis to Content 3 | o-basis-content-3 |
| Sets flex basis to Header 1 | o-basis-header-1 |
| Sets flex basis to Header 2 | o-basis-header-2 |
| Sets flex basis to Header 3 | o-basis-header-3 |