Elements layout settings



When creating a web page, you can customize the visual display of elements and their position in relation to each other (one under another, or side by side), as well as their behavior when the content changes. To set these properties, you can use the Display settings on the Styles tab.

You can choose among the following display properties:

Flex is set on a parent element (flex container) and affects the child elements in it. It has settings to control the location of child elements inside the container.

When setting this property, the parent element gets additional settings called Auto Layout. The latter allows you to setup all the necessary layout properties of the child elements.

In this case, child elements also have an additional setting called Child Layout, which allows you to determine behavior of child elements when the parent element is resized, as well as set custom alignment and order to the element in relation to other child elements. 

For more details, see: Auto Layout (in Flex mode).

Each element with the Block property appears on a new line and spans the entire width of the parent element.

You can change the width of the element in the Size settings. However, regardless of the set width and content, the element will push the element that follows it to a new line. Therefore, you will not be able to put such elements on the same line.

None property is used to completely hide an element, as if it is no more on the Canvas. All child elements will also be hidden.

This property is used to hide or display elements depending on the device or user actions.

All elements with the Inline-block property are placed side by side on one line as long as they fit on it. When the line overflows with elements, they start wrapping to the next line. The width of elements is determined by their content.

Inline-flex property is used to place multiple flex containers on one line (similar to inline-block). This cannot be achieved with the Flex property, as such an element occupies the full width of the line, regardless of the content.