Stack

Basic flexbox layout utility
<Stack>
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="8" />
</Stack>

<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<{ 1: CSSVarFunction; auto: CSSVarFunction; 0: CSSVarFunction; 2: CSSVarFunction; "100vh": CSSVarFunction; ... 16 more ...; gapY: CSSVarFunction; }, { ...; }>>
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
<Stack space="8">
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="8" />
</Stack>
<Stack space="8">
<Stack>
<Text>Vertical</Text>
<Stack>
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="8" />
</Stack>
</Stack>
<Stack>
<Text>Horizontal</Text>
<Stack direction="horizontal">
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="8" />
</Stack>
</Stack>
</Stack>
<Stack alignItems="center" direction="horizontal">
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="12" width="12" />
<Box backgroundColor="neutral9" height="8" width="8" />
</Stack>
<Stack direction="horizontal" justifyContent="space-between">
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="8" />
</Stack>

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

<Stack direction="horizontal" wrap={false}>
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="12" />
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="12" />
<Box backgroundColor="neutral9" height="8" width="8" />
<Box backgroundColor="neutral9" height="8" width="12" />
<Box backgroundColor="neutral9" height="8" width="8" />
</Stack>