HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
FlexView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA layout that places its children in a row or a column.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/flex'Preview
API ReferenceRoothelix-flexA layout that places its children in a row or a column.
PropTypeDescriptionalignContent"start"|"center"|"end"|"between"|"around"|"stretch"How the lines of a wrapping row share the space across it, set as
align-content.alignItems"start"|"center"|"end"|"stretch"|"baseline"How items align across the direction, set as align-items.columnGap"none"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"Space between the items of a row, named on the space scale. Wins over
gap across the row.direction"row"|"column"|"row-reverse"|"column-reverse"Whether items run across or down, and from which end.gap"none"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"Space between items, named on the space scale.inlinebooleanDefaultfalseFlows with the surrounding text, taking only the width of its items.justifyContent"start"|"center"|"end"|"between"|"around"How items are spread along the direction, set as justify-content.layout"cluster"|"flank"|"flank-end"|"split"|"switch"A common layout pattern: cluster, split, flank, flank-end or
switch.rowGap"none"|"2xs"|"xs"|"sm"|"md"|"lg"|"xl"|"2xl"|"3xl"Space between the lines of a wrapping row, or between the items of a
column, named on the space scale. Wins over gap down the column.wrapboolean|"reverse"DefaultfalseWhether items wrap onto more lines. wrap="reverse" wraps them upward,
each new line above the one before.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The items to lay out.
CSS PropertyDescription--flex-flank-minThe narrowest the growing item of a flank layout gets before the two stack, as a share of the row. Defaults to 50%.--flex-flank-sizeThe width of the fixed item of a flank layout. Defaults to its own width.--flex-switch-atThe narrowest a switch layout keeps its items in one row, below which each takes a line. Defaults to 30rem.
Custom stateDescriptionsettledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionColumnA column of items with a gap between them.LayoutsA title split from its actions, a cluster of tags, and an icon flanking its text.PreviewA row with a gap and its items centered.SwitchThree cards in a row that stack, one to a line, once the row is narrower than a set width.Wrap And InlineA row that wraps with its items spread along each line, and an inline row inside a sentence.