Display
Every element in a web page is a rectangular box.
The Display property determines how the rectangular box of your block 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:
Modify
Select a block .
Open the Block Inspector.
Open the Design tab.
Open the Layout tab.
Find the Display panel.
Select the required Display option (none, flex, inline-flex, block, inline-block, inline, table).
Display Types
Inherit The block takes the layout from its parent.
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.
None The block is completely removed, and does not appear in the HTML code.
Flex
The block becomes a flexbox container. On its own, it behaves like a block element. Its child blocks become flexbox items.
A flex container expands items to fill available free space or shrinks them to prevent overflow.
With Flex selected in the display dropdown, you can choose from several different display options such as: direction, align, flex-wrap, justify, flex-basis, gap.
Direction
The Direction property establishes the main axis within a flexbox container.
Select a block .
Open the Block Inspector.
Open the Design tab.
Open the Layout tab.
Open the Display tab.
Select flex in Direction panel.
Select the required Direction options (row, column, reverse).
Click on selected option to remove.
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.
Flex-Wrap
The Flex-Wrap property determines whether the flex items are forced into a single line or can be flowed into several lines.
Select a block
Open the Block inspector
Open the Design tab
Open the Layout tab
Select flex in the Direction panel
Find the flex-wrap panel
Select the required flex-wrap options (nowrap, wrap, wrap-reverse)
Click on selected wrap option to remove
Nowrap This property means that the flex items will never wrap to the next line.
Wrap The Wrap property allows the flex items to be carried over to a new line automatically as the margin is reached, or to fit around embedded features such as pictures.
Wrap-reverse This property is used to reverse the flow of the flex items when they wrap to new lines.
Align
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.
Open the Design tab.
Open the Layout tab.
Select flex in the Direction panel.
Find the Align panel.
Select the required Align options (flex-start, centre, flex-end, stretch, baseline).
Click on selected Align option to remove.
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.
Centre The blocks are centred 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 determines how flexbox children are aligned, along a main axis, usually 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.
Open the Design tab.
Open the Layout tab.
Select flex in the Direction panel.
Find the Justify panel.
Select the required Justify options (flex-start, centre, flex-end, space-between, space-around).
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.
Centre The blocks are centred 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.
Flex-basis
The Flex-Basis property controls how large an element will be along the main-axis before any growing or shrinking occurs.
Select a block .
Open the Block Inspector.
Open the Design tab.
Open the Layout tab.
Select flex in the Direction panel.
Find the Flex-basis panel.
Select the required option (flex-basis, flex-grow, flex-shrink).
Click dot to reset.
Flex-basis sets the baseline size.
Flex-grow determines how much it will grow in proportion to sibling elements.
Flex-shrink determines how much it will shrink in proportion to sibling elements.
Gap
The Gap property specifies the size of gutters, that is the space between rows and columns.
Select a block .
Open the Block Inspector.
Open the Design tab.
Open the Layout tab.
Select flex in the Direction panel.
Find the Gap panel.
Modify the required gutter (row, column).
Click dot to reset.
Last updated