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 in the Auto Layout section of the Design tab of the right pane.

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.

For more details, see: Flex Layout.

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.

Grid mode allows you to make a grid consisting of rows and columns.

For more information, see Grid Layout.

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.