A Row component is used to create a horizontal layout.

Adding a Row component

  • Select the Row component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • Next, add a few child components to align them along the horizontal axis. In the example below, three Image components are added.
14251425

Configuration Properties

Align Horizontally

The Align Horizontally property determines how the child components are vertically distributed inside a Row along the main axis.

PropertyDescription
StartChild components are positioned at the beginning of the container. Default.
CenterChild components are positioned in the center of the container.
EndChild components are positioned at the end of the container.
BetweenThe first child component is positioned at the beginning, the last child component is positioned at the end and all remaining child components are spread out evenly in between.
AroundChild components are spread out across the line with equal amounts of space surrounding them.
14251425

Align Vertically

The Align Vertical property determines how the child components are vertically distributed inside a Row along the cross axis.

PropertyDescription
StartLines are grouped together and positioned at the beginning of the cross axis. Default.
EndLines are grouped together and positioned at the end of the cross axis.
CenterLines are grouped together and positioned in the center of the container's cross axis.

To change the Align Vertical property:

  • Select the Row from the Components tree.
  • Go to the Configs tab in the Properties Panel.
  • Select from the options displayed including Start, End, and Center.
321321

Did this page help you?