Flex
A low-level flexbox container with full control over direction, alignment, and wrapping.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Flex />
Tested
Tier 1 · Render + props
all components → Render Behavior A11y Keyboard Scale E2E
6 tests across 1 file. Auto-generated from the test suite.
Item 1
Item 2
Item 3
Logo
Centered content
Item 1
Item 2
Item 3
This paragraph contains an
inline flex
element that flows with the text.
9
9
9
9
9
9
9
9
API Reference
Flex
| Prop | Type | Default | Description |
|---|---|---|---|
| Direction | string? | "row" | Flex-direction keyword appended to the flex- Tailwind prefix (e.g. "row", "col", "row-reverse"). Defaults to "row". |
| Gap | string? | — | Tailwind spacing scale suffix appended to gap- (e.g. "2", "4") to space out the children. Omitted when null/empty. |
| Align | string? | — | Cross-axis alignment keyword appended to items- (e.g. "center", "start", "stretch"). Omitted when null/empty. |
| Justify | string? | — | Main-axis distribution keyword appended to justify- (e.g. "between", "center", "end"). Omitted when null/empty. |
| Wrap | bool | false | When true, adds flex-wrap so children wrap onto multiple lines instead of overflowing. |
| Inline | bool | false | When true, renders as inline-flex instead of flex, so the container sits inline with surrounding content. |
| ChildContent | RenderFragment? | — | The flex items rendered inside the container. |
| Class | string? | — | Additional CSS classes merged onto the container. |
| AdditionalAttributes | Dictionary<string, object>? | — | Captures any unmatched attributes and applies them to the container. |