Layout

Layout

Flexbox primitives for building page structure
npx rootnative add layout
Box — Spacing & Background
Box with large padding and themed background.
Box — Directional Padding (pt / pb / ps / pe)
pt=xs · pb=lg · ps=xl · pe=xs — start/end are logical, so they flip when you toggle RTL from the app bar.
Box — Margins (mx / my / mt / mb / ms / me)
mx=lg · my=sm
mt=xs · mb=lg · ms=xl · me=sm
Row
A
B
C
Row — rowGap vs columnGap
Tight columnGap, generous rowGap — visible once the items wrap.
1
2
3
4
5
6
Row — Inverted
Source order is A, B, C — inverted renders it C, B, A.
A
B
C
Row — Space Between
Start
End
Column
1
2
3
Column — Inverted
Source order is 1, 2, 3 — inverted stacks it bottom-up.
1
2
3
Grid — 3 Columns
1
2
3
4
5
6
Grid — 2 Columns
A
B
C
D
Grid — Responsive Columns
1
2
3
4
Grid — Spanning Cells
span 8
span 4
12 → 6
Container
This screen sits in a Container with the expanded width, so the column stops at 840dp on a wide window. A style can narrow one Container further.
centred
320dp
Nested Layout
Header
Icon
1
2
3