Flex
The pura-flex primitive wraps its slotted children in a flex container, exposing direction, gap, alignment, justification, wrapping, and inline display as plain attributes. The gap attribute accepts the space scale 1 to 6 (mapped to design tokens) or any raw CSS length. It is a layout-only building block with no interactive behavior.
Preview
<script type="module" src="/pura/lib/flex.js"></script>
<!-- Row with centered items and a gap -->
<pura-flex align="center" gap="3">
<button>Save</button>
<button>Cancel</button>
<span>Last edited 2 minutes ago</span>
</pura-flex>
<!-- Column layout -->
<pura-flex direction="col" gap="2">
<h3>Account</h3>
<p>Manage your profile and preferences.</p>
<a href="/settings">Open settings</a>
</pura-flex>
<!-- Space the items apart across the row -->
<pura-flex justify="between" align="center" gap="2rem">
<strong>Dashboard</strong>
<button>New report</button>
</pura-flex>
<!-- Wrapping tag list -->
<pura-flex wrap gap="2">
<span>Design</span>
<span>Engineering</span>
<span>Marketing</span>
<span>Operations</span>
</pura-flex>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
direction | "row" | "col" | "row-reverse" | "col-reverse" | row | Main axis direction of the flex container (flex-direction). |
gap | string | 0 | Spacing between children. Use the space scale 1 to 6 (resolves to a design token) or any CSS length such as "2rem" or "12px". |
align | "start" | "center" | "end" | "stretch" | "baseline" | — | Cross-axis alignment of children (align-items). |
justify | "start" | "center" | "end" | "between" | "around" | "evenly" | — | Main-axis distribution of children (justify-content). |
wrap | boolean | false | When present, allows children to wrap onto multiple lines (flex-wrap). |
inline | boolean | false | When present, renders the container as inline-flex instead of flex. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/flex.js"></script>import "./pura/lib/flex.js";