Stack

A flexbox stack layout helper.

First

Second

Third

import { BuiStack } from 'ng-blatui';

<div buiStack gap="3">…</div>

Horizontal

One

Two

Three

<div buiStack direction="row" gap="3">…</div>

Project status

Active

<div buiStack direction="row" justify="between" align="center">…</div>

Prop	Type	Default	Description
`direction`	`"col" \| "row"`	`'col'`	Flex direction: vertical (`col`) or horizontal (`row`).
`gap`	`string`	`'4'`	Spacing between items, as a Tailwind gap step.
`align`	`string`	`''`	Cross-axis alignment (`start`/`center`/`end`/`stretch`/`baseline`).
`justify`	`string`	`''`	Main-axis distribution (`start`/`center`/`end`/`between`/`around`/`evenly`).
`wrap`	`boolean`	`false`	Whether items wrap onto multiple lines when they overflow.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.