Point: Parent and Child Boxes
Layouts in Studio.Design are built using parent-child box relationships. You adjust layouts by selecting a parent box and configuring the direction and alignment of its child boxes.
Where to Set Box Direction and Alignment
You can set box alignment using the direction and alignment menu on the screen, or from the [Direction] and [Alignment] sections under the [Box] tab in the right panel.
*The menu won't appear for boxes that don't contain any child boxes.
Setting from the Screen
Select the parent box of the box you want to adjust, and a menu will appear at the top.
Tips: To edit items like lists or components, double-click them, or click and then press Enter.
Setting from the Right Panel
Select the parent box of the box you want to adjust.
In the right panel, select the [Box] tab.
If the panel isn't visible, open the right panel.
Configure the settings using the [Direction] or [Alignment] fields in the [Layout] menu.
Box Direction
Set the direction in which boxes are arranged using the arrow direction icons.
Selecting the wrap icon
enables automatic wrapping. When the parent box becomes too narrow to fit all child boxes, they'll automatically wrap to the next line.
Box Alignment
Specify alignment for both horizontal and vertical directions.
Alignment Options by Direction
The available alignment options depend on whether child boxes are arranged horizontally or vertically:
Box Direction | [Horizontal] Alignment Options | [Vertical] Alignment Options |
Horizontal, | Left / Center / Right / Space Between / Space Around | Top / Center / Bottom / Stretch |
Vertical | Left / Center / Right / Stretch | Top / Center / Bottom / Space Between / Space Around |
Space Between and Space Around
These options distribute child elements evenly within the parent element and are useful when you want spacing between child elements to adjust automatically.
Space Between (space-between) places child elements flush against both edges, with equal spacing in between.
Space Around (space-around), on the other hand, distributes spacing evenly including margins on both edges.
Stretch
Stretch automatically expands elements to match the height of the parent element.
This is useful when child elements have different heights — their heights will adjust to match the parent element.
Point: When using Stretch, make sure the height of child elements is set to auto.
