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 gap-size
Size options: xsmall, small, medium, large, xlarge, xxlarge
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 is-x-center
- flex_horizontal is-x-right
- flex_horizontal is-y-bottom
- flex_vertical is-x-center
- flex_vertical is-y-bottom
Align Horizontal Left
flex_horizontal is-x-left
Align Horizontal Center
flex_horizontal is-x-center
Align Horizontal Right
flex_horizontal is-x-right
Align Space Between
flex_horizontal is-x-space-between
Flex Wrap
flex_horizontal flex_wrap
Align Vertical Top
flex_horizontal is-y-top
Align Vertical Center
flex_horizontal is-y-center
Align Vertical Bottom
flex_horizontal is-y-bottom
Align Horizontal Left
flex_vertical is-x-left
Align Horizontal Center
flex_vertical is-x-center
Align Horizontal Right
flex_vertical is-x-right
Align Vertical Bottom
flex_vertical is-y-bottom
Align Vertical Center
flex_vertical is-y-center
Expand Horizontally
flex_vertical is-x-stretch
Side by Side Vertically
flex_vertical is-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 width_100percent applied
Element with flex_child_expand applied
Element with width_100percent applied
Element with flex_child_shrink applied
Responsive Modifiers
Available responsive combo classes