Skip to main content

Module flex

Module flex 

Source
Expand description

Flex layout widgets: FlexColumn (vertical) and FlexRow (horizontal).

§Y-up layout convention

FlexColumn stacks children top to bottom visually, which in Y-up coordinates means the first child gets the highest Y values. The layout cursor starts at the top of the available area and moves downward.

FlexRow stacks children left to right, as expected.

§Flex algorithm

Each child has a flex factor (stored in a parallel Vec<f64>):

  • flex = 0.0 → “fixed”: the child is laid out at its natural size on the main axis.
  • flex > 0.0 → “growing”: the child receives a proportional share of the remaining space after all fixed children are measured.

Children with equal flex values split remaining space equally.

§Child margin support

Each child’s margin() (scaled by device_scale) contributes to the slot size on the main axis and is respected for cross-axis placement. Margins are additive — child A’s margin.top and child B’s margin.bottom both contribute gap space between those children (in addition to self.gap).

§Cross-axis anchoring

FlexColumn reads each child’s h_anchor() to place it horizontally within the column’s inner width. FlexRow reads v_anchor() to place children vertically within the row’s inner height.

Structs§

FlexColumn
Stacks children top-to-bottom (first child = visually topmost).
FlexRow
Arranges children left-to-right (first child = leftmost).