# Layout

# HTML Tag

Please refer to the Blocks Specifics HTML Tag article.

# Display

Every element in a web page is a rectangular box.

The Display property determines how the rectangular box will behave. It is fundamental to carefully choose what the display property of your block property will be since it directly affects its visual layout.

For most blocks with background capabilities:

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Display property
Select the appropriate display option (none, flex, inline-flex, block, inline-block, inline, table)

None The block is completely removed, and does not appear in the HTML code at all.

Flex The block becomes a flexbox container. On its own, it behaves like a block element. Its child blocks become flexbox items.

Inline-flex The block becomes a **flexbox **container but stays inline.

Block The block becomes a block element. It starts on a new line, and takes up the whole width of its parent.

Inline-block The block becomes a block container but stays **inline **(does not take up the whole width of its parent). The difference with an **inline **block is that you can give it a Height and a Width, which will be respected.

Inline The block becomes an inline element: it behaves like simple text.

An inline block accepts margins and padding, but the elements stay inline as desired. Margins and paddings will only push other blocks horizontally, not vertically. Any Height or Width property applied will have no effect.

Table The content and child elements of the block behave like table cells.

# Direction

The Direction property will only be available in blocks with Flex displays.

The Direction property establishes the main axis within a flexbox container.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Direction property
Click on the appropriate direction options (row, column, reverse)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Direction property
Click on selected option to unselect it

Row Default value. The flexbox items are ordered from left to right if reading in this direction, from right to left in the reverse case, along the main axis.

Column The flexbox items are ordered the same way as the text direction, along the cross axis, from top to bottom.

Reverse This option adds to the Row or Column property. They become row-reverse or column-reverse. It reverses the direction.

# Align

The Align property will only be available in blocks with Flex displays.

The Align property manages how flexbox children are aligned, along the secondary axis. Most of the time this will be the vertical axis.

The secondary axis and the main axis of a flexbox are defined by the Direction property.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Align property
Click on the appropriate align options (flex-start, center, flex-end, stretch, baseline)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Align property
Click on selected option to unselect it

Flex-start The blocks are positioned at the start of the flexbox container. The notion of start depends on the direction that has been chosen for the container.

Center The blocks are centered in the container, along the secondary axis (most often vertically).

Flex-end The blocks are positioned at the end of the flexbox container. The notion of end depends on the direction that has been chosen for the container.

Stretch The blocks are stretched to fill the flexbox container.

Baseline The blocks are positioned vertically relative to the baseline of the text.

# Justify

The Justify property will only be available in blocks with Flex displays.

The Justify property how flexbox children are aligned, along the main axis. Most of the time this will be the horizontal axis.

The secondary axis and the main axis of a flexbox are defined by the Direction property.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Justify property
Click on the appropriate justify options (flex-start, center, flex-end, space-between, space-around)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Justify property
Click on selected option to unselect it

Flex-start The blocks are positioned at the start of the flexbox container. The notion of start depends on the direction that has been chosen for the container.

Center The blocks are centered in the container, along the main axis (most often horizontally).

Flex-end The blocks are positioned at the end of the flexbox container. The notion of end depends on the direction that has been chosen for the container.

Space-between The remaining space is distributed between the flexbox blocks.

Space-around The remaining space is distributed around the flexbox blocks: this adds space before the first item and after the last one.

# Children

This page is empty

# Z-index

The Z-index property only applies to positioned elements. Blocks that have a relative, absolute, or fixed position.

It might not seem so obvious, but HTML elements are generated in a 3D space. Aligned on the x-axis and y-axis, elements can also rest on the z-axis.

The Z-index property defines the order of the elements on the z-axis.

The higher the number, the higher the item is in the stack and therefore closer to the screen surface.

When the Z-index property for the parent of a block is set, its children cannot be stacked above or below that level (relative to the Z-index context of the parent).

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Z-index property
Enter the desired z-index value

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Z-index property
Click on Reset

# Overflow

The Overflow property defines how the web browser should behave when content is larger than the space reserved for it.

Overflow defines whether content larger than the placeholder is still visible, if it is hidden, or if it can be scrolled by the reader.

The scroll option is is an interesting solution if you want to save space.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Overflow property
Click on the appropriate direction options (visible, hidden, overflow Y or X)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Overflow property
Click on selected option to unselect it

Visible Default value. The element is fully displayed, even if it exceeds the height defined for its block, at the risk of colliding with the remaining elements.

Hidden The content that exceeds the placeholder is not displayed and can not be accessed.

Y or X The overflowing content is hidden but it is possible to make it appear by using the scroll bars displayed by the browser.

# Visibility

The Visibility property defines the visibility of an element.

In most cases, even when the element is not visible, its location is preserved. Check the Display: none property to completely hide your block.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Visibility property
Click on the appropriate direction options (visible, hidden)

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Visibility property
Click on selected option to unselect it

# Position

The Position property defines how a block should be positioned.

By default, elements are positioned according to their order of arrival in the HTML file. The first elements encountered are placed at the top of the page and the following ones below.

The Position property is used to set the location of an element on the page, independently of its position in the HTML file: the element can therefore be found anywhere on the page. The element is then positioned.

The Position property works with the top, right, bottom and left properties which allow you to define the location of the element and, optionally, its dimensions.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Position property
Select the appropriate display option (static, absolute, relative, fixed, sticky)

Available for all positions except static.

Select a block
Open the block inspector
Navigate to the advanced tab
Open the Container Layout panel
Find the Position property
Enter the desired Top, Right, Bottom, Left values

Static The blocks are positioned one after the other, according to their order in the HTML document and natural flow of the page. The block does not react to the positioning properties.

Absolute The block is positioned in relation to the closest positioned ancestor. If there is no other element positioned, the reference will be the body. The block is positioned and reacts to the positioning properties.

Relative The blocks are positioned one after the other, according to their order in the HTML document and natural flow of the page. The block is positioned and reacts to the positioning properties.

Fixed The block is positioned according to the viewport. The element will therefore not scroll with the page and will be fixed. The block is positioned and reacts to the positioning properties.

Sticky The block scrolls with the page as long as it remains visible. The block is positioned and reacts to the positioning properties.

layout design style