Skip to main content
Box Arrangement

Adjusting the alignment of elements

Studio Support avatar
Written by Studio Support
Updated over a month ago

In Studio, boxes are arranged to form pages. Since the boxes stack like building blocks, you can adjust the layout by changing the direction and placement of the box.

Select the parent box of the box that you want to adjust the placement. A menu will appear at the top of the parent box. You can change the direction and location of the child box from this menu.

*The menu will not appear when you select a box without a child box.

Direction

You can change the direction of the boxes to line up by changing the direction menu. For example, when you select →, the boxes will line up from left to right.

You can also set the box to fold over by selecting arrow. When the parent box becomes too narrow to accommodate the child boxes, it will automatically fold back.

Alignment and Distribution

You can select an icon in the menu to set the box alignment and distribution.

In the horizontal direction, left, center, or right positions are available. For the vertical direction, you can choose the top, center, or bottom position.

Open the collapsed menu to choose between stretch-align and equal distribution.

Stretch-align

Stretch-align automatically stretches the height of an element to match the height of its parent element.

This is useful when there is a variation in the height of child elements, as it automatically aligns with the height of the elements.

Equal distribution

Equal distribution places the child elements within the parent element with equal spacing.

There are two types of equal distribution: a space-between distribution, in which child elements are placed at the beginning or end of the parent element, and a space-around distribution, in which boxes are given margins on the left and right side of the parent element.

Did this answer your question?