Flex Alignment and Spacing

Alignment

Align multiple elements

In Flex, you can save time by aligning multiple elements within the same section, column, or flexbox at the same time.

To align multiple elements:

1. Select the section, column, or flexbox and click the alignment icon () in the floating menu.
2. Select the desired alignment.

The design panel offers additional alignment options such as changing the direction of auto layout, stretching, and more.

To align multiple elements from the design panel:

1. Right click the desired section, column, or flexbox and select Edit design.
2. In the Layout section of the design panel under Align elements, select the desired vertical and horizontal content alignment.

Note

When aligning text from the floating menu or design panel, it aligns both the text and the div tag.

Align single element

While it is possible to align multiple elements at once, sometimes you only need to change the alignment of one element inside a flex column without affecting the other elements.

To align a single element:

1. Select the desired element.
2. In the floating menu, click the alignment icon () and select the desired alignment. Or, right click the element and select Edit design. This opens the design panel where you can select the alignment from the Align section.

Spacing

Spacing Between Elements

You can set the amount of horizontal or vertical space between columns within the same flex section or widgets inside a column, flexbox or advanced grid.

To set spacing between elements:

1. Right click the desired section, column, flexbox, or advanced grid and select Edit design.
2. In the Spacing section of the design panel under Spacing between elements, type or use the slider to set the percent value of horizontal space or the pixel value of vertical space you want to exist between elements in the Spacing between items field.

Note

You can reset the padding for both sections and columns by clicking the Reset padding icon in the floating menu.