Stack

Basic flexbox layout utility

<Stack>

import { Stack } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
as
"a" | "article" | "div" | "form" | "header" | "label" | "li" | "main" | "section" | "span"
div
direction
OptionalResponsiveValue<Direction>
vertical
flex
ConditionalStyle<Values<{ 1: "1 1 0%"; auto: "1 1 auto"; initial: "0 1 auto"; none: "none"; }, { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
gap
ConditionalStyle<Values<MapLeafNodes<{ '0': string; '1': string; '2': string; '3': string; '4': string; '5': string; '6': string; '7': string; '8': string; '9': string; '10': string; '11': string; '12': string; auto: string; full: string; fitContent: string; maxContent: string; ... 4 more ...; gapY: string; }, CSSVa...
4
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
wrap
OptionalResponsiveObject<boolean>
true

Stacks wrap by default, but you can force them to nowrap.