# Flex (/examples/layouts/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 [#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 [#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 [#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 [#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 [#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 [#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 [#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 [#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 [#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.