Flex utilities

The flex utilities are a small set of standalone helper classes for building layouts without writing custom CSS. `.flex` turns any element into a flex container; the rest are one-property shorthands you combine on that same element to control direction, gap, and alignment. Because each utility maps to exactly one CSS declaration, they compose freely and predictably — `.flex .direction-column .gap-md .ai-center` reads almost like the CSS it produces.

<div class="flex direction-row gap-md ai-center">
  <span>Left</span>
  <div class="flex-1"></div>
  <span>Right</span>
</div>