A
V
Flex Alignment
Definition and Usage
Flex alignment utilities are used to control how flex items are aligned along the main axis (horizontal by default) and the cross axis (vertical by default) within a flex container. These utilities make it easy to manage layout positioning without writing custom CSS.
Flex Justify Content
Definition and Usage
These classes are used inside a flex container to adjust how child items are spaced or aligned along the main axis (horizontally).
justify-content Examples
| Property | Value |
|---|---|
| FxJyCtFxSt | justify-content: flex-start; |
| FxJyCtCr | justify-content: center; |
| FxJyCtFxEd | justify-content: flex-end; |
| FxJyCtSeAd | justify-content: space-around; |
| FxJyCtSeBn | justify-content: space-between; |
| FxJyCtSeEy | justify-content: space-evenly; |
Note
These classes are used inside a flex container (DspFlex or DspInlineFlex) to adjust how child items are spaced or aligned along the main axis. The main axis is horizontal by default (flex-direction: row). If you use flex-direction: column, these alignments will apply vertically.
Flex Alignment
Definition and Usage
TThe Align utility is used to align flex items along the cross axis of a flex container. It applies the CSS align-items property, which determines how items are vertically aligned in a row layout (or horizontally in a column layout).
Align-items Examples
| Property | Value |
|---|---|
| FxAnIsSt | align-items: start; |
| FxAnIsCr | align-items: center; |
| FxAnIsEd | align-items: end; |
| FxAnIsSh | align-items: stretch; |
| FxAnIsSfSt | align-self: start; |
Note
The cross axis is vertical by default (flex-direction: row). If flex-direction: column is used, the alignment will apply horizontally. These alignment utilities help build flexible and balanced layouts with minimal code.