layout-switcher

A flexbox container that automatically switches from horizontal to vertical layout based on available space. Ideal for responsive layouts without media queries.

Attributes

Attribute Values Default Description
data-layout-threshold 20rem, 25rem, 30rem, 35rem, 40rem, 45rem 30rem Container width at which layout switches from horizontal to vertical
data-layout-gap none, xs, s, m, l, xl m Gap between items
data-layout-limit 2, 3, 4 - Maximum items before forcing vertical layout
data-layout-reverse boolean - Reverses order when stacked

Basic Usage

Items display side-by-side when space allows, then stack vertically.

Threshold Variants

The data-layout-threshold attribute controls when the switch happens.

Item Limit

The data-layout-limit attribute forces vertical layout when there are more items than the limit.

Usage Examples

Form Actions

Card Header

Feature Comparison

Related
↑