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"123justify="evenly"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

Fill

fill makes items grow equally to fill the container (the flex: 1 equivalent); fill-ratio (percent, default 100) distributes proportionally — settable per item, with the container-level fill-ratio as the default.

fill — equal fill

One

Two

Three

Example

fill-ratio — proportional

1

2 (200%)

3

Container default 300%

Also 300%

Example

About per-item order: oas-flex has no child-item component carrier (children are arbitrary host elements), so per-item order has no reasonable API and is intentionally not provided in this version. It will be revisited if an item component (oas-flex-item) scenario emerges later.

Responsive

direction and gap support breakpoint shorthand: a space-separated base value plus several breakpoint:value tokens (e.g. direction="column md:row", gap="8px md:16px"). Below a breakpoint width the base value applies; from the breakpoint up (mobile-first min-width) the breakpoint value applies.

Breakpoints:

Breakpoint	Width
sm	640px
md	768px
lg	1024px
xl	1280px

Responsive direction: stacked on narrow, row from md

Button 1Button 2Button 3

Example

Responsive gap: 8px base, 24px from md

123456

Example

Narrow the browser window to watch direction switch from row back to column and the gap tighten.

Empty container

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

Empty container

Example

API

oas-flex

Attributes

Attribute	Description	Type	Default
align	Cross-axis alignment	string	stretch
direction	Main-axis direction; supports breakpoint shorthand: space-separated base value + several breakpoint:value tokens (e.g. column md:row). Breakpoints sm=640px / md=768px / lg=1024px / xl=1280px (mobile-first min-width); below a breakpoint the base value applies. Illegal breakpoint names/values fall back to the base value with a dev warning	string	row
fill	Make items grow equally to fill the container (the flex: 1 equivalent)	boolean	—
fill-ratio	Distribution ratio for fill (percent, default 100): settable per item, container-level as the default	string	—
gap	Gap between items; supports breakpoint shorthand (e.g. 8px md:16px, breakpoints as direction)	string	—
justify	Main-axis alignment: start/center/end/between/around/evenly (bidirectionally compatible with legacy flex-*/space-* values)	string	start
vertical	Vertical shorthand (= direction:column; takes precedence over direction)	boolean	—
wrap	Wrapping (boolean; present means wrap)	boolean	—

Slots

Name	Description
default	Flex layout children

CSS Variables

CSS Variable	Default
--oas-flex-direction	${dirBase}
--oas-flex-gap	${toLen(gapShorthand.base) || 'normal'}