Flowkit (Beta)Structure & Layout

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)

LabelCombo Class Example
XX Small GapFlex Horizontal Flex Gap XXS
X Small GapFlex Horizontal Flex Gap XS
Small GapFlex Horizontal Flex Gap SM
Medium GapFlex Horizontal Flex Gap MD
Large GapFlex Horizontal Flex Gap LG

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

Content
Content

Align Horizontal Center Flex Horizontal X Center

Content
Content

Align Horizontal Right Flex Horizontal X Right

Content
Content

Align Space Between Flex Horizontal X Space Between

Content
Content

Flex Wrap Flex Horizontal Flex Wrap

Content
Content
Content

Align Vertical Top Flex Horizontal Y Top

Content
Content

Align Vertical Center Flex Horizontal Y Center

Content
Content

Align Vertical Bottom Flex Horizontal Y Bottom

Content
Content

Align Horizontal Left Flex Vertical X Left

Content
Content

Align Horizontal Center Flex Vertical X Center

Content
Content

Align Horizontal Right Flex Vertical X Right

Content
Content

Align Vertical Bottom Flex Vertical Y Bottom

Content
Content

Align Vertical Center Flex Vertical Y Center

Content
Content

Expand Horizontally Flex Vertical X Stretch

Content
Content

Side by Side Vertically Flex Vertical 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 [Utility] Width 100% applied

Element with Flex Child Expand applied

Content

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 Horizontal

These allow you to force direction across breakpoints.

Tablet

DescriptionCombo Classes
Horizontal directionFlex Horizontal Tablet Flex Horizontal
Vertical directionFlex Horizontal Tablet Flex Vertical
Vertical direction, center content XFlex Horizontal Tablet Flex Vertical Tablet X Center
Vertical direction, center content YFlex Horizontal Tablet Flex Vertical Tablet Y Center

Mobile Landscape

DescriptionCombo Classes
Horizontal directionFlex Horizontal Mobile Landscape Flex Horizontal
Vertical directionFlex Horizontal Mobile Landscape Flex Vertical

Mobile Portrait

DescriptionCombo Classes
Horizontal directionFlex Horizontal Mobile Landscape Flex Horizontal
Vertical directionMobile Landscape Flex Vertical