How do I layout my native UI elements with NativeScript? – NativeScript

Learning layouts in NativeScript is very powerful. NativeScript ships with several layout containers, each optimized for a certain purpose.

<StackLayout> stacks components on top of (or next to) each other;
<WrapLayout> uses available space to wrap components on new rows/columns;
<AbsoluteLayout> places components with absolute top/left coordinates;
<GridLayout> acts like an HTML table, with rows and columns;
<DockLayout> positions components in docked containers (top/bottom/left/right);
<FlexboxLayout> lets you leverage CSS flexbox.

We've put together a quick training site to help you learn how to use each NativeScript layout container.