Flex

The Flex system provides utility classes for creating flexible layouts using Flexbox. It supports both row and column directions with various alignment options for quick and consistent layout creation.

Basic Flex Usage

The flex system provides two main ways to control layout:

Direction: Use flex--row or flex--col for layout direction
Alignment: Use flex--start, flex--center, or flex--end for alignment

Row Direction

Use flex flex--row with alignment modifiers:

Start

Center

End

Flex Row Direction

<div class="flex flex--row flex--start">
  {{ Item }}
</div>

<div class="flex flex--row flex--center">
  {{ Item }}
</div>

<div class="flex flex--row flex--end">
  {{ Item }}
</div>

Column Direction

Use flex flex--col with alignment modifiers:

Start

Center

End

Flex Column Direction

<div class="flex flex--col flex--start">
  {{ Item }}
</div>

<div class="flex flex--col flex--center">
  {{ Item }}
</div>

<div class="flex flex--col flex--end">
  {{ Item }}
</div>