# Stack

Source: https://lumeo.nativ.sh/components/stack

# Stack

A flex-based layout component for stacking elements vertically or horizontally with consistent spacing.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Stack />

Preview Code

Basic Vertical

Item 1

Item 2

Item 3

Preview Code

Horizontal

Item 1

Item 2

Item 3

Preview Code

Gap Sizes

Gap 1

Gap 4

Gap 8

Preview Code

Alignment

Preview Code

Direction — interactive

Pick a direction to see it applied live.

Vertical Horizontal

Item 1

Item 2

Item 3

## API Reference

### Stack

Property

Type

Default

Description

Direction

Lumeo.Orientation

Vertical

Stack direction. Values: Vertical (flex-col), Horizontal (flex-row).

Gap

string?

"4"

Spacing between items. Maps to gap-{value} (e.g. "2", "4", "8").

Align

string?

—

Cross-axis alignment. Maps to items-{value} (e.g. "center", "start", "end").

Justify

string?

—

Main-axis alignment. Maps to justify-{value} (e.g. "center", "between", "end").

Wrap

bool

false

Whether items should wrap to the next line when they overflow.