Working with Flex components

With Analytics+, you can create stunning multi-element dashboards. When you work with Flex positioning, you only need to choose the direction (horizontal or vertical), and Analytics+ will automatically handle the alignment and positioning with consistent gap and fill options.

Let's look at the options available to customize Flex containers.

1. Fit and fill options for individual elements

When you combine multiple elements into a flex container, you can choose whether the element should have a fixed size and position or whether the element should fill the available canvas space.

The images below depict the difference between the Fixed and Fill resizing options.

2. Container Flex configuration

Click on the Flex element to customize. The Flex configuration side pane has 2 tabs:

2.1. Properties

1. Position: The X and Y coordinates where the flex container should be placed.

2. Size: The height and width of the container.

Note: You can also click and drag the container to re-position or drag the the corners/edges to resize.

2.2. Layout:

1. Direction

Arrange elements vertically or horizontally. New elements will also be inserted based on the direction chosen. For example, when arranging elements vertically, new containers are automatically added at the bottom. Similarly, if you arrange flex elements horizontally, new containers will be added to the left.

2. Gap

Space between each element in a flex container. The gap will be set horizontally or vertically depending on the direction in which elements are aligned.

By default, the gap width is set to fixed. Enable the toggle for Auto width - each element is evenly spaced in the container.

3. Align

Set the vertical and horizontal positioning of elements within the flex container. Some sample alignments are shown below:

4. Padding

Set the spacing between the flex container and the elements. You can set uniform padding with the All option or Custom padding for each side.