# Flex

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

# Flex

A low-level flexbox container with full control over direction, alignment, and wrapping.

## 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

<Flex />

Preview Code

Basic Row

Item 1

Item 2

Item 3

Preview Code

With Spacer

Logo

About Blog Sign In

Preview Code

Centered

Centered content

Preview Code

Wrapping

9

9

9

9

9

9

9

9

## API Reference

### Flex

Property

Type

Default

Description

Direction

string?

"row"

Flex direction. Maps to flex-{value} (e.g. "row", "col", "row-reverse", "col-reverse").

Gap

string?

—

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.

Inline

bool

false

Use inline-flex instead of flex for inline layout.