Wrap

Fission

Product

▾

Setup

›

›

Wrap is the flow-layout helper for content that should continue onto another line or column when space runs out.

This is a strong fit for chips, tag clouds, compact action sets, filter pills, or other repeated items that should flow naturally rather than force a strict grid or one long row.

Use Wrap when wrapping behavior is the important part of the layout. Do not use it when you need exact track definitions or predictable card columns. For those cases, use Grid or SimpleGrid.

Example

use fission::op::FlexDirection;
use fission::prelude::*;

let widget: Widget = Wrap {
    direction: FlexDirection::Row,
    spacing: Some(8.0),
    children: vec![
        Text::new("Design").into(),
        Text::new("Performance").into(),
        Text::new("Accessibility").into(),
    ],
}
.into();

Field table

Field	Type	Meaning	Notes / default behavior
direction	FlexDirection	Whether the flow starts as a row or a column.	Defaults to FlexDirection::Row.
spacing	Option<f32>	Gap between items.	Defaults to None.
children	Vec<Widget>	Items that participate in the flow layout.	Defaults to an empty list.

Layout behavior

Wrap is implemented by building either a wrapping Row or a wrapping Column. That means it inherits the flex-style behavior of those primitives while forcing FlexWrap::Wrap.

In practice, FlexDirection::Row is the common case. FlexDirection::Column is available for less common layouts where items should flow downward and then into another column.

Specific advice

Wrap is best when items are relatively self-sized and the layout can stay visually loose. If you need every tile to respect a minimum width and create a more card-like responsive grid, prefer SimpleGrid.

Production checklist

For Wrap, review the fields that change behavior before treating the widget as finished: direction, spacing, children. The goal is to make the product rule visible in state and actions, not hidden inside ad-hoc construction code.

•

If this widget appears inside an interactive flow, keep the surrounding action binding in the parent component and test that the flow still has one clear reducer path.

•

When child widgets are generated from data, give reordered or filtered rows an explicit WidgetId so retained local state and scroll behavior do not drift between items.

•

Check the semantics tree for the user-facing label or role that makes this widget understandable without relying only on pixels.

•

Add at least one component or harness test that confirms the visible text, semantic role, action dispatch, and layout constraint that matter for this widget in context.

If a screen starts repeating the same Wrap setup, extract a named component around this widget. That keeps the reference API small while making product code easier to read and safer for generated code to copy.

Row, Column, SimpleGrid, and Grid.