< All FAQs

How do I layout my native UI elements with 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.


Sponsored by progress-logo-min
NativeScript is licensed under the Apache 2.0 license
© 2018 Progress Software Corporation. All Rights Reserved. Privacy Center