Split
Two columns in 1 : φ, wrapping when narrower than twice the basis.
Examples
Split
1
φ
Flipped
φ
1
Anatomy
.split | Wrapping flex row. Exactly two children. |
> :first-child | The narrow side, growing 1 (φ with data-flip). |
> :last-child | The wide side, growing φ (1 with data-flip). The narrow side keeps at least --basis, the wide side --basis · φ; below that they wrap onto two rows, so side by side the ratio is always exact. |
API
| Attribute | Values | Description |
|---|---|---|
data-flip | boolean | Swaps the ratio so the first child is the wide one. The order stays the same. |
--basis | <length> | Minimum width of each side; the split wraps when it can't give both. Default φ⁶ ≈ 18rem. |
Accessibility
data-flipchanges widths, not order: reading and tab order follow the markup, so put first what should be read first and flip the ratio to suit.