wf-split distributes its direct children across the full width using justify-content: space-between . Every child stays at its intrinsic size — nothing grows or shrinks. This makes it the go-to primitive for toolbars, page headers, and any row where content needs to sit at opposite edges.
The first child sits at the start, the last child sits at the end, and all free space is between them.
<div class="wf-split">
<div>Left</div>
<div>Right</div>
</div>With more than two children, free space is distributed evenly between every item.
<div class="wf-split">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>Wrap related items in a wf-cluster so split sees two logical groups — one at each edge — while items within each group stay tightly together. This is the standard toolbar pattern.
<div class="wf-split">
<div class="wf-cluster wf-gap-3">
<div>Logo</div>
<div>Nav A</div>
<div>Nav B</div>
</div>
<div class="wf-cluster wf-gap-3">
<div>Search</div>
<div>Button</div>
</div>
</div>Children align to the top of the row.
<div class="wf-split wf-items-start">...</div>Children align to the bottom of the row.
<div class="wf-split wf-items-end">...</div>All modifier classes available on .wf-split
| Class Name | Type | Description |
|---|---|---|
| wf-split | Base | Flex row, space-between . Children are auto-sized and do not grow or shrink. Default gap is --wf-space-md . |
| wf-gap-1 … wf-gap-8 | Spacing | Numeric gap — most visible when items wrap to a second row. |
| wf-gap-3xs … wf-gap-5xl | Spacing | Semantic gap scale. |
| wf-items-start / -center / -end / -stretch / -baseline | Alignment | Cross-axis alignment of all children. Default is center . |