When designing a page in Qodly Studio, it is important to consider how its components will be laid out on the page to make the UI presentable. Generally, main groups of components should be aligned horizontally in the center to make the UI appear clean and symmetrical. To do this easily, upon creating a new page, first set the Display property of the Root of the page (under Appearance) to “flex”.



This sets the CSS layout of the page to use Flexbox, which helps to automatically align and distribute space among items on the page. Then, set the Direction property to “Column” and the Align property to “center”. This will neatly align items on the page in a column in the horizontal center. Note that only the immediate children of the page’s root will be aligned this way, so groups of components can be configured in a different layout style (e.g. in a row) if they are contained in styleboxes. This makes it easy to build a more complex but clean layout.