The width and height values determine the size of the element.

Select an element and set its size in the top bar.


There are several different size units in STUDIO.

Pixel (px)

Pixel size is a fixed unit. If the width is set to pixels, the size of that element will not change, regardless of the size of the page or screen.

Percentage (%)

The percent (%) is the size of the element as it relates to the parent box or page size. If you use percentages, the ratio of the element to the page or container box changes with the page's reduction.

Auto

If you set the width or height to Auto, the size of the element will be set automatically.

The width and height will be set automatically by double-clicking the border of the element or by selecting the element and choosing "auto" from the top bar.

It is recommended to set the height of the container box to AUTO and use padding to adjust the margins.

Note: If you set the size unit of a container box to auto and its child boxes to %, it won't work. If you want to set the parent box in percent or pixels, the size of the child box is relative.

Flex

The flex widens the width of the element to fill in the remaining margins in the box.

To set the width of an element to flex, first make sure the orientation of the element is horizontal, then select the element and select "flex" from the drop down on the top bar.

The flex value represents the fractional units of the width of the box. For example, if there are four elements with a flex value of 1, they occupy an equal proportion to the width of the box.

Flex allows you to quickly create complex layouts. For example, a gallery of photos with different widths.

The flex value changes.

To create a gallery with photos of different widths, you can change the flex value to increase the value of the photos you want to take up more space.

In the above example, the flex value is set as follows.

Vh

If you specify "vh" in the height unit, the height will automatically change according to the size of the screen, and you can set the style to fill the page with any screen size.

💡The difference between 100vh and the 100% designation

When specifying the width of the image as a percentage of the width of the viewport, % works just fine. However, websites are usually long, and even if you specify a % height, it won't recognize the height of the viewport well, so it will be based on the height of the section box.

▼ 100% of the time (influenced by the height of the parent box)

Did this answer your question?