Skip to main content

Module column_flow

Module column_flow 

Source
Expand description

ColumnFlow — flows children into as many columns as the width affords, re-partitioning every child when a column is gained or lost.

The newspaper / CSS multi-column model: content runs down column 0, then down column 1, and so on. The column count is derived from the available width and min_column_width — when the width no longer affords N columns the layout drops to N−1 and all children are re-partitioned across the survivors. Children are atomic: one child never straddles a column boundary.

Pair it with a ScrollArea for vertical overflow — ColumnFlow reports its true content height (the tallest column), so the scroll extent is correct.

let _view = ScrollArea::new().child(
    ColumnFlow::new()
        .min_column_width(240.0)
        .max_columns(4)
        .column_spacing(16.0)
        .item_spacing(12.0)
        .child(TextWidget::new(lit!("First")))
        .child(TextWidget::new(lit!("Second")))
        .child(TextWidget::new(lit!("Third"))),
);

§Reading order

Children are distributed as contiguous runs in source order — column 0 takes children 0..i, column 1 takes i..j. So source order, visual reading order, and focus order are the same thing, at every column count. This is why ColumnFlow does not reuse MasonryLayout’s shortest-column packing, which interleaves children and would divorce the visual order from the source order.

§Accessibility

By default ColumnFlow emits a bare Role::GenericContainer carrying no properties, which the accessibility walker prunes, promoting the children to its parent in source order. That is the correct outcome for a layout primitive: it contributes geometry, not semantics, and the reading order is already right. Add semantics from the outside with .access_role(..) / .access_label(..), or opt into list semantics with semantic_list.

§Relationship to CSS multi-column

Close, but not identical. CSS column-fill: balance balances content within a column height it computes from a bounded block size; ColumnFlow derives the column count from the width and lets the height run free (a ScrollArea absorbs it). No CSS column-fill mode does that, so don’t read this as a CSS multicol port.

Structs§

ColumnFlow
A layout that flows its children into as many columns as the available width affords, re-partitioning every child when a column is gained or lost.