The Layout editor is based on Flexbox and allows you to lay out, align, and distribute space among child components within a container. The most common example of a container component is the View.

Seen here, a one "View" contains a carousel, which contains another view, a title, link, etc. You can control the layout of elements within a view with the tools in the "Layout" panel.

Display

The Display property gives you the ability to show or hide a component on the screen. When set to None the component and its children will be hidden. Depending on the component type, the other option will either be Flex (for components that support Flexbox) or Block (for components that do not support Flexbox). In either case, using this value will result in the component being displayed on the screen.

If Display is not showing up at the top of your Appearance Panel, it may be located in the Other tab.

Flex Direction

If you have a component that contains children, such as a View, Flex Direction lets you customize how the children are displayed.

• Column: The children will be displayed vertically, or top-to-bottom. This is the default behavior.
• Row: The children will be displayed horizontally, or side-by-side.
• The Reverse Row and Reverse Column options work in the same way, except the order of the children will be reversed. For example, when using Reverse Column, the child component that normally would be displayed at the bottom will display at the top, and so on.

Justify Content

If the children take up less space than the container, Justify Content gives you the ability to control how the children are aligned along the primary axis, as determined by the Flex Direction property. This means that if Flex Direction is set to Row, this controls how the children are displayed horizontally (to the left, to the right, etc.). If the Flex Direction is set to Column, this controls how the children are displayed vertically.

• Start (1st Icon): Children are aligned to the start of the container. This means the top when working in a column, and the left when working in a row. Any remaining space will be assigned to the opposite end of the container.
• Center (2nd Icon): Children are aligned in the middle of the container, and any remaining space will be equally assigned to the start and end of the container.
• End (3rd Icon): Children are aligned at the end of the container, and any remaining space will be assigned to the start of the container. When working in a row, this is similar to right justification when aligning text.
• Space Between (4th Icon): If there is remaining space, it will be equally divided between each of the child components. When using this option, no space will be given to the start or end of the container.
• Space Evenly (5th Icon): This is similar to Space Between, except that equal space will be given to the start and end of the container as well as between each child.
• Space Around (6th Icon): If there is remaining space in the container, an equal amount of space will be given to the beginning and end of each child.

Align Items

Align Items is similar to Justify Content, the difference being that it works on the non-primary, or cross axis. When the container is set to “Row,” this controls how the children are aligned vertically. When the container is set to “Column,” this controls how the children are aligned horizontally.

• Start (1st Icon): Children are aligned at the start of the cross-axis. For example, if you are working within a column, this would align the children with the left side of the column and available empty space will display to the right of the children. If you are working within a row, the children would be aligned to the top of the row and any available space will be displayed below them.
• Center (2nd Icon): Children are aligned to the center of the cross-axis.
• End (3rd Icon): Children are aligned at the end of the cross-axis.
• Stretch (4th Icon): Children are stretched to fill out the available space on the axis. If you are working within a column, this means the children will be widened to fill the width of the parent container.
• Baseline (5th Icon): Children are aligned to the baseline of the first child component. The baseline is defined as the bottom of the first child of a given component.

📍📍📍 Note 📍📍📍

A common use case is to display an item both horizontally and vertically centered within another item. In this case, you would set both the Justify Content and Align Items properties to “center.”

Flex Wrap

By default, children will be shrunk to fit within a single line of the container. “Flex Wrap” allows the items to wrap when they extend past the end of the container.

• No Wrap: Children will be forced onto one line and will not wrap. This will cause elements to shrink if they exceed the available space.
• Wrap: Children will be permitted to wrap onto multiple lines if they exceed the available space of the current line.
• Wrap Reverse: Children will wrap onto multiple lines in reverse order.

Direction

Direction allows you to control the directional flow of the interface. The default is set to inherit unless you have a root Layout selected—which will have a value based on the locale of the end user.

• Inherit: Inherits direction from the parent.
• Left to Right (“Ltr”): Text and children are laid out from left to right
• Right to Left (“Rtl”): Text and children are laid out from right to left

Align Self

Align Self has the same controls as Align Items, but it allows you to override the default alignment (or the one specified by Align Items) for a specific child.  Note: The cross axis will change when you have Column vs. Row selected – the icons will update to reflect that.

• Start (1st Icon): Children are aligned at the start of the cross-axis.
• Center (2nd Icon): Children are aligned to the center of the cross-axis.
• End (3rd Icon): Children are aligned at the end of the cross-axis.
• Stretch (4th Icon): Children stretch to fill the container.
• Baseline (5th Icon): Children are aligned where their baselines align.

Align Content

Align Content allows you to control the space for multiple lines of content.

📍📍📍 Note 📍📍📍

This property only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse. A single-line flexible container (i.e., where Flex Wrap is set to its default value, no-wrap) will not reflect align-content.

• Start (1st Icon): Align wrapped lines to the start of the container's cross-axis
• Center (2nd Icon): Align wrapped lines in the center of the container's cross-axis
• End (3rd Icon): Align wrapped lines to the end of the container's cross-axis
• Space Around (4th Icon): Evenly space wrapped lines across the container's cross-axis, distributing the remaining space around the lines
• • Compared to Space Between, using Space Around will result in space being distributed to the beginning of the first line and the end of the last line
• Space Between (5th Icon): Evenly space wrapped lines across the container's cross axis distributing the remaining  space between the lines

Flex

Flex properties give you the ability to control how much space a component takes up within a flexed container.

• By default, the component will attempt to take up as much space as is defined by the width property (when using flex-direction: row) or height property (when using flex-direction: column).
• When set to a positive number, the component will take up the available space. This value is a ratio—a component with a flex value of 2 will take up twice as much space as a component with a flex value of 1. Each input accepts any value greater or equal to 0 and negative numbers are invalid.
• If you would like all children to fill up the available space equally, set all of their flex values to the same number—usually 1.
• If you would like one child to remain a static size and the other to fill up the remaining space, leave the first child set to flex: 0 (the default) and set the second child to flex: 1.
• • Flex Basis: An axis-independent way of specifying the default size of an item along the main axis (basis is the default size of an item before grow or shrink calculations are performed)
  • • If the parent container’s Flex Direction is set to Column, setting the Basis of a child is similar to setting the ‘height.’
    • If the parent container’s Flex Direction is set to Row, setting the Basis of a child is similar to setting the ‘width.’
  • Flex Grow: Defines how space within a container should be distributed among the children on the main axis (the container will distribute the remaining space to each of its children based on the Flex values assigned to each of the children in the container)
  • Flex Shrink: Defines how to shrink children along the main axis when the size of the children overflows the size of the container.

Gap

Gap properties give you the ability to control the spacing between children within a container that uses Flexbox or Grid layouts. This is an efficient way to distribute spacing without adding margins to individual child components. Each input accepts any value greater or equal to 0, and negative numbers are invalid.

• Gap: Defines uniform spacing between items in both the horizontal and vertical directions. Setting the main Gap value applies the same space between all rows and all columns.
• Column Gap: Defines the spacing between children along the horizontal axis (the space between columns). Use Column Gap to control horizontal spacing specifically, such as between columns in a grid or a row-based Flex container.
• Row Gap: Defines the spacing between children along the vertical axis (the space between rows). Use Row Gap to control vertical spacing specifically, such as between stacked rows in a column-based Flex container or a form layout.