A
V
Flex Direction
Definition and Usage
The flex direction utility sets the direction of flex items inside a flex container. It determines how the flex items are placed in the container—horizontally or vertically, and in what order.
Aspect-Ratio Examples
| Property | Value |
|---|---|
| FxDnRw | flex-direction: row; |
| FxDnCn | flex-direction: row; |
| FxDnRwRe | flex-direction: row-reverse; |
| FxDnCnRe | flex-direction: column-reverse; |
Note
Use these utilities with display: flex or display: inline-flex to quickly control the layout flow of child elements. Perfect for both horizontal menus and stacked content in responsive designs.
Flex Wrap
Definition and Usage
The flex wrap (FxWp) utility controls whether flex items are forced onto one line or can wrap onto multiple lines. It helps manage overflow and layout behavior when dealing with many or large flex items.
Aspect-Ratio Examples
| Property | Value |
|---|---|
| FxWpNoWp | flex-Wrap: nowrap; |
| FxWp | flex-Wrap: wrap; |
| FxWpRe | flex-Wrap: wrap-reverse; |
| FxWpIl | flex-Wrap: initial; |
| FxWpIt | flex-Wrap: inherit; |
Note
Use flex wrap when you have a dynamic number of items or content that may exceed the container’s width or height. It ensures a responsive, multi-line layout without manual intervention.