Skip to main content
Documentation/Elements & Controls Reference/Layout and Shared Controls/Layout Engine/Basic Layouts/Vertical and Horizontal Layouts

Vertical and Horizontal Layouts

Select a parent container and open Design > Layout to arrange its children.

Vertical

Choose Vertical, then set:

  • Align — Left, Center, or Right; also supplies inherited text alignment unless overridden by a child.
  • Vertical Align — Top, Middle, or Bottom within available height.
  • Gap — Space between children.
Cards stacked in a Vertical layout with Gap controls visible
Cards stacked in a Vertical layout with Gap controls visible

Horizontal

Choose Horizontal, then set:

  • Align — Left, Center, Right, Space Around, or Space Between. The last two distribute free space around items or between them with outer items at the edges.
  • Vertical Align — Top, Middle, or Bottom.
  • Gap — Space between children.

Basic rows do not wrap; use Advanced Flexbox for Flex Wrap.

Cards arranged in a Horizontal layout with alignment and Gap controls
Cards arranged in a Horizontal layout with alignment and Gap controls

Stack at a Breakpoint

Set Vertical At, then Alignment When Vertical to Left, Center, or Right. This changes the same elements' direction; adjust responsive child widths and gaps as needed.

Horizontal layout controls including Vertical At and Alignment When Vertical
Horizontal layout controls including Vertical At and Alignment When Vertical