Flex
Flex utilities allow you to control flex-direction, justify-content, and
align-items properties with responsive support.
Note: Default (
xs) classes have no breakpoint suffix. Use -sm,
-md, -lg for responsive variants.
Flex Direction
| Class | Property |
|---|---|
.fo-flex-direction-row | flex-direction: row; |
.fo-flex-direction-row-reverse | flex-direction: row-reverse; |
.fo-flex-direction-column | flex-direction: column; |
.fo-flex-direction-column-reverse | flex-direction: column-reverse; |
Justify Content
| Class | Property |
|---|---|
.fo-justify-content-flex-start | justify-content: flex-start; |
.fo-justify-content-center | justify-content: center; |
.fo-justify-content-flex-end | justify-content: flex-end; |
.fo-justify-content-space-between | justify-content: space-between; |
.fo-justify-content-space-around | justify-content: space-around; |
.fo-justify-content-space-evenly | justify-content: space-evenly; |
Align Items
| Class | Property |
|---|---|
.fo-align-items-flex-start | align-items: flex-start; |
.fo-align-items-center | align-items: center; |
.fo-align-items-flex-end | align-items: flex-end; |
.fo-align-items-stretch | align-items: stretch; |
.fo-align-items-baseline | align-items: baseline; |
Legacy Center Helpers
These are shorthand classes combining justify-content and align-items for quick centering.
They remain for backward compatibility but new code should use the explicit utilities above.
| Class | Effect |
|---|---|
.fo-center-center | Center horizontally & vertically |
.fo-center-top | Center horizontally, align top |
.fo-center-bottom | Center horizontally, align bottom |
.fo-center-stretch | Center horizontally, stretch vertically |
.fo-center-space-between | Space between horizontally, align center vertically |
.fo-center-space-around | Space around horizontally, align center vertically |
Examples