Flex

The built-in flex tag — a flexbox container exposing the full CSS flex surface (direction, wrap, justify, align, gap). All options and a full attribute reference.

{% flex %} is a built-in tag for a flexbox container with the full CSS flex surface as props. Where {% group %} and {% stack %} are opinionated row/column shortcuts, flex gives you direction, wrap, justify, align, and per-axis gaps directly. Reach for it when you need precise control over the flex layout.

Use it as {% flex %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'flex', …).

Justify and align

justify is the CSS justify-content and align is align-items. Together they place the children along the main and cross axes — here pushed to the edges and vertically centered.

Direction

direction is any CSS flex-direction — row (the default), column, row-reverse, or column-reverse. A column direction stacks the children top to bottom.

Wrap and per-axis gaps

wrap is any CSS flex-wrap (nowrap, wrap, wrap-reverse); when children wrap onto a new line, rowGap and columnGap set the gaps independently — vertical and horizontal.

With other components

The body is ordinary Markdown, so Flex makes a clean toolbar — a label pushed left, actions pushed right.

Attributes

Flex sets no defaults of its own — it’s a thin Box over CSS flex, so an omitted option falls back to the CSS initial value. The flex options come first; the rest is the shared Mantine spacing/sizing system.

CSS Selectors

Each flex carries data-aardvark-island="Flex" on its wrapper, and Mantine exposes its parts as mantine-Flex-* classes — target either to style it from your theme CSS.

[data-aardvark-island="Flex"] {
  /* style every flex on the page */
}

.mantine-Flex-root {
  /* the root part */
}

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) straight onto the rendered element.