Skip to content

Layout

The Python binding to Yoga's C++ flexbox engine. Headless tests use LayoutNode and calculate_layout to compute frames (x, y, width, height) with stub intrinsic measurements.

Mobile renderers compile the same Yoga core into their native libraries and measure content beside their widgets. The browser preview runs Yoga WebAssembly. Those renderers return changed frames to the Python reconciler through the bridge.

For a conceptual overview, see Layout engine.

Yoga 3.2.1 layout for headless tests and the Python preview host.

Mobile hosts run this same pinned core beside their native widgets. This module contains style translation and ownership, not a second flex algorithm.

Classes:

Name Description
LayoutNode

An owned Yoga node, with Python measurement for headless backends.

Functions:

Name Description
apply_style

Translate Pythonic style keys to Yoga's native style API.
calculate_layout

Calculate a tree's layout with the pinned Yoga core.
extract_layout_style

Select properties owned by layout.

Attributes:

Name Type Description
LAYOUT_STYLE_KEYS

Style keys that affect layout (and are consumed by the layout engine).

LAYOUT_STYLE_KEYS module-attribute 

LAYOUT_STYLE_KEYS = frozenset(
    {
        "width",
        "height",
        "min_width",
        "max_width",
        "min_height",
        "max_height",
        "flex",
        "flex_grow",
        "flex_shrink",
        "flex_basis",
        "flex_wrap",
        "align_self",
        "align_content",
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "start",
        "end",
        "margin",
        "margin_top",
        "margin_bottom",
        "margin_left",
        "margin_right",
        "margin_start",
        "margin_end",
        "margin_horizontal",
        "margin_vertical",
        "padding",
        "padding_top",
        "padding_bottom",
        "padding_left",
        "padding_right",
        "padding_start",
        "padding_end",
        "padding_horizontal",
        "padding_vertical",
        "border_width",
        "border_top_width",
        "border_right_width",
        "border_bottom_width",
        "border_left_width",
        "flex_direction",
        "justify_content",
        "align_items",
        "spacing",
        "gap",
        "row_gap",
        "column_gap",
        "aspect_ratio",
        "direction",
        "display",
    }
)

Style keys that affect layout (and are consumed by the layout engine).

LayoutNode 

LayoutNode(
    style: dict[str, Any] | None = None,
    children: list[LayoutNode] | None = None,
    measure: (
        Callable[[float, float], tuple[float, float]] | None
    ) = None,
    user_data: Any = None,
)

An owned Yoga node, with Python measurement for headless backends.

apply_style 

apply_style(ptr: int, style: dict[str, Any]) -> None

Translate Pythonic style keys to Yoga's native style API.

calculate_layout 

calculate_layout(
    node: LayoutNode, width: float, height: float
) -> None

Calculate a tree's layout with the pinned Yoga core.

extract_layout_style 

extract_layout_style(
    props: dict[str, Any],
) -> dict[str, Any]

Select properties owned by layout.

Next steps