Start Here
Core Concepts
UI Effects
Animations
Box Shadows
Text Shadow
UI Widgets
Color Shade
Gradient
Text Gradient
Background Gradient
Border Gradient
Other Pages
Nav First Level
Nav Second Level
Nav Third Level
N
A
V
A
V
Flex Position
Definition and Usage
The Flex Positioning utility classes combine both horizontal and vertical alignment using Flexbox. These classes simplify layout alignment by applying both justify-content and align-items together—allowing quick and consistent positioning of items within a flex container.
Flex Position Examples
| Property | Value |
|---|---|
| FxBmLt | display: flex; justify-content: flex-start; align-items: end; |
| FxBmCr | display: flex; justify-content: center; align-items: end; |
| FxBmRt | display: flex; justify-content: flex-end; align-items: end; |
| FxCrLt | display: flex; justify-content: flex-start; align-items: center; |
| FxCr | display: flex; justify-content: center align-items: center; |
| FxCrRt | display: flex; justify-content: flex-end; align-items: center; |
| FxTpLt | display: flex; justify-content: flex-start; align-items: start; |
| FxTpCr | display: flex; justify-content: center; align-items: start; |
| FxTpRt | display: flex; justify-content: flex-end; align-items: start; |
Note
Apply these classes directly to any container where you want to control item positioning without writing multiple alignment classes.
These flex positioning utilities are designed for readability, reusability, and layout clarity—making alignment easy to apply and maintain in your codebase.
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
Logout
Change Password
Change Email