Layout Options Overview

These options require GenerateBlocks 1.7.

The layout options are the fundamentals of how the block is displayed.

Note that these options are available for Container, Headline and Button block. The Grid block has its own Layout options.

Display

The display property specifies the display behavior (the type of rendering box) of an element.

Default

the default display property value is taken from the HTML specifications or from the browser/user default style sheet. The default value in XML is inline, including SVG elements.

Block

Displays an element as a block. It starts on a new line, and takes up the whole width.

One
Two

Inline Block

Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values.

One
Two

Flex

Displays an element as a block-level flex container. See details here.

One
Two

The flex-direction property specifies the direction of the flexible items.

Row: Default value. The flexible items are displayed horizontally, as a row.

One
Two

Row + ⬅ (reverse): Same as row, but in reverse order.

One
Two

Column: The flexible items are displayed vertically, as a column.

One
Two

Column + ⬆ (reverse): Same as column, but in reverse order.

One
Two

The align-items property specifies the default alignment for items inside a flexbox or grid container.

flex-start: Items are positioned at the beginning of the container.

One
Two

center: Items are positioned at the center of the container.

One
Two

flex-end: Items are positioned at the end of the container.

One
Two

stretch: Items are stretched to fit the container.

One
Two

baseline: Items are positioned at the baseline of the container.

One
Two

The justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).

flex-start: Default value. Items are positioned at the beginning of the container.

One
Two

center: Items are positioned at the center of the container.

One
Two

flex-end: Items are positioned at the end of the container.

One
Two

space-between: Items will have space between them.

One
Two

space-around: Items will have space before, between, and after them.

One
Two

The flex-wrap property specifies whether the flexible items should wrap or not.

No Wrap: Default value. Specifies that the flexible items will not wrap.

One
Two

Wrap: Specifies that the flexible items will wrap if necessary.

One
Two

Reverse Wrap: Specifies that the flexible items will wrap, if necessary, in reverse order.

One
Two

Column Gap: Specifies the gap between the columns in flexbox.

One
Two

Row Gap: Specifies the gap between the rows in flexbox.

One
Two

Inline flex

Displays an element as an inline-level flex container.

One
Two

The flex-direction property specifies the direction of the flexible items.

Row: Default value. The flexible items are displayed horizontally, as a row.

One
Two

Row + ⬅ (reverse): Same as row, but in reverse order.

One
Two

Column: The flexible items are displayed vertically, as a column.

One
Two

Column + ⬆ (reverse): Same as column, but in reverse order.

One
Two

The align-items property specifies the default alignment for items inside a flexbox or grid container.

Start: Items are positioned at the beginning of the container.

One
Two

Center: Items are positioned at the center of the container.

One
Two

End: Items are positioned at the end of the container.

One
Two

Stretch: Items are stretched to fit the container.

One
Two

Baseline: Items are positioned at the baseline of the container.

One
Two

The justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).

Start: Default value. Items are positioned at the beginning of the container.

One
Two

Center: Items are positioned at the center of the container.

One
Two

End: Items are positioned at the end of the container.

One
Two

Space Between: Items will have space between them.

One
Two

Space Around: Items will have space before, between, and after them.

One
Two

The flex-wrap property specifies whether the flexible items should wrap or not.

No Wrap: Default value. Specifies that the flexible items will not wrap.

One
Two

Wrap: Specifies that the flexible items will wrap if necessary.

One
Two

Reverse Wrap: Specifies that the flexible items will wrap, if necessary, in reverse order.

One
Two

Column Gap: Specifies the gap between the columns in flexbox.

One
Two

Row Gap: Specifies the gap between the rows in flexbox.

One
Two

Inline

Displays an element as an inline element (like ). Any height and width properties will have no effect.

One
Two

Position

The position property specifies the type of positioning method used for an element.

Default: Does not specify a value to the position property.

Relative: The element is positioned relative to its normal position.

Overflow-X/Overflow-Y

The overflow property specifies what should happen if content overflows an element’s box. It only works for elements with a specified height/width.

Default: Does not specify a value to the overflow property.

Visible: Default value. The content is not clipped, and it may be rendered outside the left and right edges.

One
Two

Hidden: The content is clipped and no scrolling mechanism is provided.

One
Two

Scroll: The content is clipped and a scrolling mechanism is provided.

One
Two

Auto: Should cause a scrolling mechanism to be provided for overflowing boxes.

One
Two

Z-Index

The z-index property specifies the stack order of an element.

z-index: 2
z-index: 1

Flex Child

Flex

The flex property sets the flexible length on flexible items.

Grow: The flex-grow property specifies how much the item will grow relative to the rest of the flexible items.

grow: 1;
grow: 1;
grow: 1;
grow: 2;
grow: 1;
grow: 1;
grow: 3;
grow: 1;
grow: 1;

Shrink: The flex-shrink property specifies how much the item will shrink relative to the rest of the flexible items. Check out the demo here.

shrink: 0;
shrink: 1;
shrink: 1;
shrink: 1;
shrink: 1;
shrink: 1;
shrink: 2;
shrink: 1;
shrink: 1;

Basis: The flex-basis property specifies the length of the item. Legal values: auto, inherit, or a number followed by %, px, em or any other length unit. Check out the demo here.

basis: auto;
basis: auto;
basis: auto;
basis: 0;
basis: auto;
basis: auto;
basis: 300px;
basis: auto;
basis: auto;

Order

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

Visit MDN Web Docs, W3Schools, and CSS-TRICKS to learn more about the options.