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

Content
Content

Align Horizontal Center
flex_horizontal is-x-center

Content
Content

Align Horizontal Right
flex_horizontal is-x-right

Content
Content

Align Space Between
flex_horizontal is-x-space-between

Content
Content

Flex Wrap
flex_horizontal flex_wrap

Content
Content
Content

Align Vertical Top
flex_horizontal is-y-top

Content
Content

Align Vertical Center
flex_horizontal is-y-center

Content
Content

Align Vertical Bottom
flex_horizontal is-y-bottom

Content
Content

Align Horizontal Left
flex_vertical is-x-left

Content
Content

Align Horizontal Center
flex_vertical is-x-center

Content
Content

Align Horizontal Right
flex_vertical is-x-right

Content
Content

Align Vertical Bottom
flex_vertical is-y-bottom

Content
Content

Align Vertical Center
flex_vertical is-y-center

Content
Content

Expand Horizontally
flex_vertical is-x-stretch

Content
Content

Side by Side Vertically
flex_vertical is-space-between

Content
Content

Flex Child Modifiers

These combo-classes define how children inside a flex container behave:

BehaviorCombo Class
No Shrinkflex-child_no_shrink
Expandflex-child_expand
Shrinkflex-child_shrink

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

Content

Element with width_100percent applied

Element with flex_child_shrink applied


Responsive Modifiers

Available responsive combo classes

Combo ClassDescription
tablet-x-centerCenter horizontally on tablet
tablet-y-centerCenter vertically on tablet
mobile-l-x-centerCenter horizontally on mobile large
mobile-l-y-centerCenter vertically on mobile large
mobile-x-centerCenter horizontally on mobile
mobile-y-centerCenter vertically on mobile