Switcher and row
Side by side until the container is narrower than --threshold, then stacked; or equal columns in a row.
Examples
Switcher
one
two
three
Row
one
two
Anatomy
.switcher | Wrapping flex row. Its children share the width equally until the switcher is narrower than --threshold, then each takes a full row. All switch at once, never two-and-one. |
.row | One row of equal columns, however many children. Stacks under a 48rem viewport. |
API
| Attribute | Values | Description |
|---|---|---|
--thresholdon .switcher | <length> | Container width below which the children stack. Default φ^7.5 ≈ 37rem. |
Accessibility
- Switching only changes the layout: the children keep their source order when they stack, so write them in reading order.
- The switcher responds to its own width, not the viewport's, so it also stacks when zoomed text makes the container narrow.