1#
2# A simple row and a column layout with flexbox
3#
4
5# Create a container with ROW flex direction
6cont_row = lv.obj(lv.scr_act())
7cont_row.set_size(300, 75)
8cont_row.align(lv.ALIGN.TOP_MID, 0, 5)
9cont_row.set_flex_flow(lv.FLEX_FLOW.ROW)
10
11# Create a container with COLUMN flex direction
12cont_col = lv.obj(lv.scr_act())
13cont_col.set_size(200, 150)
14cont_col.align_to(cont_row, lv.ALIGN.OUT_BOTTOM_MID, 0, 5)
15cont_col.set_flex_flow(lv.FLEX_FLOW.COLUMN)
16
17for i in range(10):
18    # Add items to the row
19    obj = lv.btn(cont_row)
20    obj.set_size(100, lv.pct(100))
21
22    label = lv.label(obj)
23    label.set_text("Item: {:d}".format(i))
24    label.center()
25
26    # Add items to the column
27    obj = lv.btn(cont_col)
28    obj.set_size(lv.pct(100), lv.SIZE.CONTENT)
29
30    label = lv.label(obj)
31    label.set_text("Item: {:d}".format(i))
32    label.center()
33
34