Flow Layout

Flow layout

Flow automatically arranges the areas inside a Section in a row or column. You can use it to create rows of cards, place an image next to a text, or stack content with consistent spacing.

How to use Flow

1. Create a Section area and place the areas you want to arrange inside it.
2. Select the Section and open the Styling tab.
3. Under Content Layout, change Flow to Horizontal stack or Vertical stack.
4. Choose the spacing and alignment, and set the gaps between the areas.

Horizontal stack places areas next to each other. Vertical stack places them below each other. The areas follow their order within the Section. Choose Standard to return to the normal layout.

Spacing and alignment

The Spacing menu controls how the available space is divided:

• Fixed gap: keeps the areas together using the gap you set.
• Space between: divides the remaining space between the areas, with the first and last area at the edges.
• Space around: adds space around each area. The space at the outer edges is half the space between areas.
• Space evenly: uses equal space between the areas and at the outer edges.

Use the Alignment grid to position the group within the Section. For example, choose the centre point to centre the areas. When you distribute the available space, the grid lets you adjust alignment in the other direction.

Stretch height makes areas fill the height of a horizontal row. Stretch width makes them fill the width of a vertical column. This is useful for creating cards with equal heights or a stack of full-width areas. When both stretching and distributed spacing are enabled, turn off stretching or choose Fixed gap to change alignment.

Gaps and wrapping

Horizontal gap sets the space between areas or columns. Vertical gap sets the space between areas or rows. Both values are entered in pixels.

Enable Wrap to let areas move to a new row or column when they do not fit. Disable it to keep them on one line. In a horizontal stack, the vertical gap is only available when Wrap is enabled. In a vertical stack, the horizontal gap is only available when Wrap is enabled.

For a vertical stack to wrap into additional columns, the Section needs a limited height.

Settings for individual areas

Select an area inside the Section to adjust its own behaviour:

• Alignment: choose Auto (follow parent) to use the Section's alignment, or choose a different alignment for this area.
• Fill available width / Fill available height: lets the area take a share of the remaining space in the stack. If several areas have this enabled, they share the extra space.
• Allow shrinking: lets the area become smaller when there is not enough space in the row or column.

Areas with Absolute or Fixed positioning are outside the Flow layout. Use normal positioning for areas that should be arranged in the stack.

Responsive layouts

You can use different Flow settings on different artboards. For instance, place an image and text next to each other on desktop, then use a vertical stack on mobile. Check the spacing, sizes and wrapping on each artboard before publishing.