# Flex

```ts
import { Flex, Rectangle } from "@pibbl/core";
```

`Flex` uses [`FlexProps`](/reference/types/layout/#flexprops) and [`FlexStyle`](/reference/types/layout/#flexstyle); direct children can supply
[`FlexItemStyle`](/reference/types/layout/#flexitemstyle). It accepts recursive [`PibblNode`](/reference/types/elements-components/#pibblnode) children and resolves finite
allocations before rendering. Reverse ordering, advanced intrinsic sizing,
margins, and scrolling are outside the supported subset.

```tsx
<Flex style={{ width: 300, height: 80, flexDirection: "row", gap: 12 }}>
  <Rectangle style={{ width: 80, height: 60, fill: "#2563eb" }} />
  <Rectangle style={{ width: 80, height: 60, fill: "#f59e0b" }} />
</Flex>
```

Explore the [Flex live example](/playground/#/examples/layout/flex).

## API details from source

<span id="api-Flex"></span>

Describes the supported Flexbox subset for JSX or createElement authoring.

```ts
Flex: PibblPrimitiveComponent<FlexProps, PrimitiveInput<FlexProps, FlexStyle>>
```

Related API: [Flex](/reference/components/flex/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [FlexProps](/reference/types/layout/#flexprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [FlexStyle](/reference/types/layout/#flexstyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[FlexProps](/reference/types/layout/#flexprops)

[FlexStyle](/reference/types/layout/#flexstyle)

[View source — packages/core/src/lib/layout/flex.ts:203](/source/packages/core/src/lib/layout/flex-ts/#L203)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Flow and flex layout](/minimal-examples/layout/flow-flex/): Stack a banner with a flexible row of marks. [Plain source](/minimal/layout/flow-flex.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.