Flex

A layout container based on CSS Flexbox; attributes control direction, main/cross-axis alignment, gap and wrapping.

Basic usage

Horizontal and gap

Tag 1Tag 2Tag 3

Example

Direction

The vertical shorthand equals direction="vertical" (stacked vertically).

Vertical direction

Stacked verticallyTop to bottomAdjustable gap

Example

Equivalent direction syntax

direction="vertical"Same as vertical

Example

Main-axis alignment

justify — full enumeration

justify="start" (default)123justify="center"123justify="end"123justify="between"123justify="around"123

Example

Cross-axis alignment

align — full enumeration

align="stretch" (default)ButtonTagalign="start"ButtonTagalign="center"ButtonTagalign="end"ButtonTagalign="baseline"ButtonTag

Example

A fixed 80px-height container with items of different heights (button 32px / tag 20px) shows the cross-axis difference of each align variant; stretch stretches items to the container height.

Wrapping

wrap is a boolean attribute: when present, flex-wrap: wrap; otherwise nowrap.

Wrap

12345678910

Example

Empty container

With no children the height is 0 — no error, no placeholder.

Empty container

Example

API

Attributes

Attribute	Description	Type	Default
align	Cross-axis alignment	string	stretch
direction	Main-axis direction	string	row
gap	Gap between items	string	—
justify	Main-axis alignment	string	start
vertical	Vertical shorthand	boolean	—
wrap	Wrapping (boolean; present means wrap)	boolean	—

Slots

Name	Description
default	—