# 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. {% hint style="info" %} A flex container expands items to fill available free space or shrinks them to prevent overflow. {% endhint %} 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 {% hint style="info" %} The Align property manages how flexbox children are aligned, along the secondary axis. Most of the time this will be the vertical axis. {% endhint %} {% hint style="info" %} The secondary axis and the main axis of a flexbox are defined by the Direction property. {% endhint %} * 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 {% hint style="danger" %} The Justify property will only be available in blocks with Flex displays. {% endhint %} The `Justify` property determines how flexbox children are aligned, along a main axis, usually the horizontal axis. {% hint style="danger" %} The secondary axis and the main axis of a flexbox are defined by the Direction property. {% endhint %} * 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.