# 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.

<div><figure><img src="/files/Gs8JM0J5dl5wJe7zvP9V" alt=""><figcaption><p>Fixed resizing</p></figcaption></figure> <figure><img src="/files/VZkm2cyRe2ImFxspfXFY" alt=""><figcaption><p>Fill resizing</p></figcaption></figure></div>

## 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.&#x20;

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

<figure><img src="/files/qY68qHzBRCNF17dM99GH" alt=""><figcaption><p>Container size and position</p></figcaption></figure>

#### **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.

<figure><img src="/files/4f1cUKnYckix05vaFvSJ" alt=""><figcaption><p>Arrangement direction </p></figcaption></figure>

#### **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.

<figure><img src="/files/czUZCXonPVlxwmElNoFc" alt=""><figcaption><p>Gap between elements in a container</p></figcaption></figure>

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

<figure><img src="/files/Li5rWAg4MAdNF3Ig2E2k" alt=""><figcaption><p>Auto gap</p></figcaption></figure>

#### 3. Align

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

<div><figure><img src="/files/1d9Dxa5FNnXYnuUEFcRx" alt=""><figcaption><p>Top left</p></figcaption></figure> <figure><img src="/files/cw7ckz9pOcHbUq72uueu" alt=""><figcaption><p>Center-Center</p></figcaption></figure> <figure><img src="/files/RWaYFVivcfgWJzZMp5Js" alt=""><figcaption><p>Bottom right</p></figcaption></figure></div>

#### 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.

<figure><img src="/files/Ks9x55JerFf4FFVWK41M" alt=""><figcaption><p>Container padding</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.inforiver.com/analytics+/working-with-analytics+/4.-cards/4.7.-kpi-containers/working-with-flex-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.