# Stack elements {% embed url="" %} Stacks are containers that group multiple elements together in a horizontal or vertical layout. They act like a flexible canvas within your page, allowing you to precisely position and arrange elements to keep them from overlapping or drifting apart as the screen resizes.

## How to create a Stack {% hint style="success" %} Steps: 1. Click an element that you want to be in the Stack. 2. Hold down the **Shift** key and select the other elements to stack them together. 3. Select the stack direction: **Stack vertical** or **Stack horizontal**. The stack direction can also be set to **Wrap** using the [Inspector panel](#direction). {% endhint %}

Pro tip: Quick stack your selected elements vertically by using the keyboard shortcut: **Ctrl +**

**(Enter/ Return)**. {% hint style="warning" %} * Once you use a stack, nested elements will be set to auto-space between. * You can't apply constraints to any elements within the stack. However, you can still apply constraints to the stack itself. [Learn more about Constraints here](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints). {% endhint %} {% hint style="info" %} To detach an element from a stack, simply select it and drag it out. To add a new element to a stack, drag it over the stack until you see the blue indicator and drop it. To unstack elements, select the stack in the editor, then clich **Unstack**, or use the keyboard shortcut: Ctrl +

. {% endhint %}

## How to manage a Stack {% hint style="success" %} Steps: 1. Select the Stack you want to edit 2. In the **Inspector** panel, make relevant changes to the settings. {% endhint %} Besides other common settings (colors, backgrounds, effects, etc.), settings specialized for Stack are included in the **Design** tab > **Auto layout**.

* **Direction**: Set the way the stack will flow: *

(Vertical): Add, remove, and reorder objects along the y-axis. *

(Horizontal): Add, remove, and reorder objects along the x-axis. *

(Wrap): Arrange objects in multiple rows and columns in a frame. Objects will flow horizontally and wrap to the next line. * **Distribute:** Set the alignment of the element when stacked horizontally. * **Align**: Set the alignment of the element when stacked vertically. * **Gap**: Change the gap (margin) between the rows and columns within the stack.

If the stack direction is set to vertical or horizontal, you'll be able to set the gap between elements vertically (row gap) or horizontally (column gap), respectively. {% hint style="info" %} When you select a stack in the editor, the margins between the elements are indicated by the pink strips. Move elements further apart or closer together by dragging these handles to adjust the spacing of all the elements at once. {% endhint %}

{% hint style="info" %} **Pro tip**: The margins (pink strips) between the elements included in a stack are equally set. If you want to make an element that is further apart from others, you can **set more spacing to that element specifically**. ![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FbukizjNDLOzV8gMaTAIE%2Fimage.png?alt=media\&token=c9201925-b39a-440b-815d-ebc701cb673d) {% endhint %} * **Padding:** Padding controls the empty or white space between the boundary of a stack and the elements within it. You can adjust padding uniformly for all sides, or fine-tune it individually for top, right, bottom, or left.

## Absolute element control When an element is placed within a Stack (Auto-layout), it cannot be freely repositioned. Instead, it aligns with the direction of the stack. However, enabling the **Absolute Position** option allows you to freely drag and position the element as needed, just like in normal layouts.

{% hint style="success" %} * **Static:** Default position; follows the normal layout flow. * **Relative:** Stays in the layout flow but can be moved slightly from its original spot. * **Absolute:** Removed from the layout flow and positioned relative to its nearest positioned ancestor or the page. * **Sticky:** Acts like relative but becomes fixed when scrolling reaches a set point (e.g., sticky headers). {% endhint %} {% tabs %} {% tab title="Static" %} {% hint style="info" %} Static position places elements according to the normal flow, without allowing custom positioning adjustments. {% endhint %}

{% endtab %} {% tab title="Relative" %} {% hint style="info" %} Relative position acts as a container for Absolute elements, allowing them to be positioned relative to the container. {% endhint %}

{% endtab %} {% tab title="Absolute" %} {% hint style="info" %} The Absolute Position option lets you freely drag and position the element, just like in regular layouts. {% endhint %}

{% endtab %} {% tab title="Sticky" %} {% hint style="info" %} You can customize the spacing of a sticky element by adjusting the Inset setting. {% endhint %}

{% endtab %} {% endtabs %} --- # 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.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements.md?ask= ``` 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.