# 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:

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Display property
  6. 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 establishes the main axis within a flexbox container.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Direction property
  6. Click on the appropriate direction options (rowcolumnreverse)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Direction property
  6. 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 manages how flexbox children are aligned, along the secondary axis. Most of the time this will be the vertical axis.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Align property
  6. Click on the appropriate align options (flex-startcenterflex-endstretchbaseline)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Align property
  6. 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 how flexbox children are aligned, along the main axis. Most of the time this will be the horizontal axis.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Justify property
  6. Click on the appropriate justify options (flex-start, center, flex-end, space-between, space-around)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Justify property
  6. 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

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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Z-index property
  6. Enter the desired z-index value
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Z-index property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Overflow property
  6. Click on the appropriate direction options (visiblehiddenoverflow Y or X)
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Overflow property
  6. 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.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Visibility property
  6. Click on the appropriate direction options (visible, hidden)
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Visibility property
  6. 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 toprightbottom and left properties which allow you to define the location of the element and, optionally, its dimensions.

  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Position property
  6. Select the appropriate display option (static, absolute, relative, fixed, sticky)​​
  1. Select a block
  2. Open the block inspector
  3. Navigate to the advanced tab
  4. Open the Container Layout panel
  5. Find the Position property
  6. 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.