A Row component is used to create a horizontal layout.
- 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.
The Align Horizontally property determines how the child components are vertically distributed inside a Row along the main axis.
|Start||Child components are positioned at the beginning of the container. Default.|
|Center||Child components are positioned in the center of the container.|
|End||Child components are positioned at the end of the container.|
|Between||The 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.|
|Around||Child components are spread out across the line with equal amounts of space surrounding them.|
The Align Vertical property determines how the child components are vertically distributed inside a Row along the cross axis.
|Start||Lines are grouped together and positioned at the beginning of the cross axis. Default.|
|End||Lines are grouped together and positioned at the end of the cross axis.|
|Center||Lines 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.
Updated 9 months ago