Flex

A 1D layout that arranges children in a row or column, analogous to CSS Flexbox. Useful for toolbars, lists, and any stack where one axis drives placement.

Flex align

Place items along the main and cross axes.

style_flex_main_place distributes items along the row direction, while style_flex_cross_place aligns items of different heights on the cross axis. The mix of a tall button, a switch, and a checkbox makes cross-axis alignment easy to see.

Flex flow

Arrange children with a flex flow direction.

A single row_wrap container holds enough buttons to overflow one line, so wrapping kicks in. Try other flex_flow values (row, column, row_reverse, column_wrap_reverse) to see how item order and wrap direction change with the same set of children.

Flex grow

Distribute leftover row space by weight.

Three buttons share a row: the first has a fixed width and the other two use flex_grow. The free space left in the row is split in proportion to the grow weights, so the grow=2 item receives twice as much extra width as the grow=1 item.

Flex ignore layout

Opt one item out of the flex flow.

With ignore_layout="true", Flex skips the item entirely: it keeps its manual x/y position and does not occupy a slot. The remaining items lay out as if it were not there, which is useful for overlays, floating badges, or absolutely positioned helpers.

Flex internal padding

Set horizontal and vertical gaps between flex items.

style_pad_column controls the gap between items on a row, and style_pad_row controls the gap between wrapped rows. The container uses row_wrap so both gaps are visible at once — the chips spread out horizontally and rows are pushed apart vertically.

List built from a flex container

Build a list from a plain flex column.

A column-flow flex container stacks full-width text headers and buttons. The static flex_list_* helpers wrap the few flex calls needed: LV_FLEX_FLOW_COLUMN for the list, full-width rows for the items, and lv_obj_set_flex_grow so each button's label fills the row next to its icon. The list look is produced with styles applied by hand.

Flex new track

Force an item to start a new wrap row.

In a row_wrap container an item with flex_in_new_track="true" begins a fresh track instead of continuing the previous one. Here the weekend labels are pushed onto their own row regardless of how much horizontal space remains on the first row.

Flex RTL

Reverse the main axis direction with style_base_dir.

The same three children appear in two identical row containers. Setting style_base_dir to rtl on the second container reverses item ordering on the main axis without changing the order of children in XML — handy for right-to-left languages or mirrored layouts.

Window built from a flex container

Build a window from a flex column.

The static win_* helpers build the window from base widgets: a LV_FLEX_FLOW_COLUMN container with a fixed-height LV_FLEX_FLOW_ROW header bar and a lv_obj_set_flex_grow content area below. The title uses lv_obj_set_flex_grow to push the buttons to the right, and the content holds a long label so the body scrolls.