Row
Layout
Takes a block
Horizontal flex layout. It stays a row at every width unless .stacks or a responsive direction says otherwise.
Row(gap: …, align: …, justify: …) { … }
Example
Row(gap: .md, align: .center, justify: .between) {
Text("Left")
Button("Right")
}
Row(direction: { base: .column, md: .row }) { Text("a") Text("b") }
Renders with the class wf-row, stable across releases, so a stylesheet may target it.
| Prop | Type | Meaning |
|---|---|---|
| gap: | .xs .sm .md .lg .xl |
Space between children |
| align: | .start .center .end .stretch .baseline |
Cross-axis alignment |
| justify: | .start .center .end .between .around .evenly |
Main-axis distribution |
| direction: | .row .column |
Which way its children run; takes a value per breakpoint |
| stacks: | Bool |
Reflow on a narrow screen: a Row becomes a column, a Grid one column |
Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.