Flow

Flow lays out children in declaration order and starts another line when the current line cannot fit the next child.

Wrap content-dependent items

Flow {
  ForEach(tags, [](const Tag& tag) {
    return Chip(tag.name, tag.selected).Key(tag.id);
  }),
}.With(
    Spacing(8.0F),
    CrossAlign(CrossAxisAlignment::Center)
)

It is useful for chips, tags, compact actions, and other items with content-dependent width. Unlike Row, it does not require every child to remain on one horizontal line.

Spacing controls the gap between items and wrapped lines according to the built-in flow policy. Alignment modifiers affect placement within available line space.

Keep dynamic identity stable

Use stable keys for dynamic stateful items that can reorder. For a very large scrollable data set, use VirtualGrid rather than mounting every item in a flow.

Flow adds no semantic role of its own and preserves its children in declaration order, including after visual wrapping.

API

• Construction: Flow { children... } or an explicit child vector.
• Common modifiers: Spacing, MainAlign, CrossAlign, Padding, Frame.

Wrapping and lifecycle

Flow is in huxerui, <huxerui/view.h>. Braced View/Views content and vector construction use the inherited Layout constructors. Finite available width determines wrapping; a Flow measured with unbounded width has no width boundary at which to wrap.

All children remain mounted as the window width changes. A visual row break does not create a new child scope or reorder the semantic reading order. Keys identify the logical items, not their temporary line positions. Flow has no independent selection model, events, or Style; bind each Chip’s controlled event separately.

Use Flow for heterogeneous content-width items. Use VirtualGrid when columns should line up across rows or when item creation must be bounded by the viewport. For a fixed-height region that may gain extra lines, place Flow inside a ScrollView rather than assuming the wrapping container scrolls by itself.