Every component in Replo can be positioned using auto layout. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new components, accommodate longer text strings, or maintain alignment as your designs evolve.

From CSS

For users familiar with CSS, auto layout is based on Flexbox, and you'll find there are many similaries between Flexbox and Auto Layout.

From Figma 

For users familiar with Figma, auto layout in Replo works exactly the same way as auto layout in Figma, except it will work across device sizes as we will explain below.

There are lots of ways to use auto layout:

• Create buttons that grow or shrink as you edit the text label.
  Combine auto layout components to build complete interfaces.
  Auto layout is a powerful feature with many moving parts and uses. In this article we'll show you how how each of its properties work.

Direction

Direction describes the way the auto layout component will flow.

Choose vertical to add, remove, and reorder objects along the y-axis. For example: objects within a list, or posts within a newsfeed or timeline. Choose horizontal to add, remove, and reorder objects along the x-axis. For example: a row of buttons, or icons in a mobile navigation menu.

Replo currently supports only one direction at a time, horizontal or vertical. To build designs that use both directions, you will need to combine or nest auto layout frames.

Spacing between Components

Adjust the spacing between items using the spacing fields in the right sidebar. To use the spacing fields in the Auto layout section of the right sidebar. Enter a number in the field, nudge the values using your arrow keys, or scrub the field using your cursor.

Alignment

Choose how to align child objects within an auto layout component. Both the direction of the auto layout component and the distribution will determine what alignment options you have available.

Layout Examples

Aligning Containers with Different Lengths of Text