Flex Layouts

By setting layout="flex" you can switch a UI subtree to use a different UI layout engine backed by yogalayout (which implements the CSS flexbox layout model).

The yogalayout website has playground where can freely experiment as well as visual documentation that will allow you to experiment and quickly grasp how it works. This flexbox guide us also useful to cross-reference for some more confusing fields.

The main advantage of layout="flex" over the default (layout="legacy") is the ability to make responsive UI that works for a variety of different screen sizes and aspect ratios. It also helps for making items take up a percentage of their parents size rather than using “matchParentWidth/Height” or a static size.

Finally, it can be useful any time you struggling to accomplish what you want with HStack, VStack, Scrolls, Virtual Lists, or Grids.

Some features:

1. widthPercent/heightPercent to define width/height value as a percentage of the parent frame
2. position=absolute and left/right/top/bottom attributes to position frames relative to the parent frame
3. flexGrow/Shrink to define how a UI frame resizes according to screen resolution changes.

When using Flex layouts; it can help to realize that a frame type labeled flex will automatically arrange children similar to a Stack. You will have to change the flex-related attributes of the parent and children frames if this isn’t the behavior you desire.

Use Cases

• Replace Grid, HStacks, VStacks
• Width/Height as %
• More responsive: make your UI adjust to different screen sizes more smoothly
• More complex positioning

Example Map

This demo map demonstrates each attribute separately. Open the UI tab in the data editor and the UI previewer (Window > UI Previewer) and click on each frame to preview it’s behavior. Resizing the UI Previewer window may make the behavior more obvious in some cases.

https://platform.wildsky.dev/arcade/game/613 (Click “Source” to download)