Flex

Read as Markdown

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

Flex uses FlexProps and FlexStyle; direct children can supply FlexItemStyle. It accepts recursive PibblNode children and resolves finite allocations before rendering. Reverse ordering, advanced intrinsic sizing, margins, and scrolling are outside the supported subset.

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

API details from source

Describes the supported Flexbox subset for JSX or createElement authoring.

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

Related API: Flex, PibblPrimitiveComponent, FlexProps, PrimitiveInput, 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

FlexStyle

View source — packages/core/src/lib/layout/flex.ts:203

Implementation guidance for agents

Read the Drawing, layout, and effects companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.

Complete minimal examples

• Flow and flex layout: Stack a banner with a flexible row of marks. Plain source

Documentation version

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