Stack

Row

Loading...

Column

Loading...

• Tag: <flint-stack>
• Class: FlintStack

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintStack } from '@getufy/flint-ui';

Usage

<flint-stack></flint-stack>

Properties

Property	Attribute	Type	Default	Description
direction	direction	ResponsiveValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>	'column'	Flex direction of the stack layout.
spacing	spacing	ResponsiveValue<number | string>	0	Space between child items. Numeric values use an 8px multiplier (e.g. 2 = 16px).
gap	gap	ResponsiveValue<number | string> | undefined	—	Alias for spacing. Space between child items.
alignItems	alignItems	'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | undefined	—	Cross-axis alignment of stack children.
justifyContent	justifyContent	'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | undefined	—	Main-axis alignment of stack children.
useFlexGap	useFlexGap	boolean	true	Whether to use CSS flex gap for spacing.

CSS Parts

Name	Description
base	The component's base wrapper element.

CSS Custom Properties

Property	Default
--flint-stack-spacing	0px

---