Flex Layout
Flex layout utilities define how elements are laid out in one dimension (either horizontally or vertically).
Use direction, spacing, alignment, and child behavior modifiers to achieve flexible and consistent layouts.
Flex Directions
Class Flex Horizontal and Flex Vertical define the element as a flex layout container in either row or column direction.
Flex Spacing
Spacing between children is controlled with gap modifiers: Flex (Direction) Flex Gap (X)
Flex Alignment
Use alignment combo-classes to control positioning of children inside a flex layout.
Alignment can be horizontal (X) or vertical (Y) depending on the direction of the parent container.
Common examples:
- Flex Horizontal X Center
- Flex Horizontal X Right
- Flex Horizontal Y Bottom
- Flex Vertical X Center
- Flex Vertical Y Bottom
Align Horizontal Left
Flex Horizontal X Left
Align Horizontal Center
Flex Horizontal X Center
Align Horizontal Right
Flex Horizontal X Right
Align Space Between
Flex Horizontal X Space Between
Flex Wrap
Flex Horizontal Flex Wrap
Align Vertical Top
Flex Horizontal Y Top
Align Vertical Center
Flex Horizontal Y Center
Align Vertical Bottom
Flex Horizontal Y Bottom
Align Horizontal Left
Flex Vertical X Left
Align Horizontal Center
Flex Vertical X Center
Align Horizontal Right
Flex Vertical X Right
Align Vertical Bottom
Flex Vertical Y Bottom
Align Vertical Center
Flex Vertical Y Center
Expand Horizontally
Flex Vertical X Stretch
Side by Side Vertically
Flex Vertical Space Between
Flex Child Modifiers
These combo-classes define how children inside a flex container behave:
Useful for allowing or preventing children from stretching, shrinking, or expanding based on available space.
Element with Flex Child No Shrink applied
Element with [Utility] Width 100% applied
Element with Flex Child Expand applied
Element with [Utility] Width 100% applied
Element with Flex Child Shrink applied
Responsive Modifiers
On Tablet resolution (991px and below), Flex Horizontal automatically changes to vertical layout by default.
To override this behavior, use responsive modifier combo classes, such as:
Tablet Flex Horizontal Mobile Landscape Flex HorizontalThese allow you to force direction across breakpoints.