# Layout & Positioning

{% hint style="info" %}
As of version 1.18, all Size and Position properties have been placed into a **Layout & Positioning** section in all component properties, along with the addition of two alignment properties - **Horizontal Alignment** and **Vertical Alignment**
{% endhint %}

### Finding the properties

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F5MG94XaroTLCaTqllOBK%2FLayout%20%26%20Positioning.png?alt=media&#x26;token=d3ad5bcd-ffd0-4b7a-803c-b73f7991ce74" alt="" width="281"><figcaption></figcaption></figure>

All **Layout & Positioning** properties can be found in the top section of **any components'** properties panel.

### XY Positions

The **XY positioning** of a component is determined by the component's top left corner of its bounding box.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FkGtnojMaTxZSS4sxzFxB%2FLayout_and_Positioning_XY.png?alt=media&#x26;token=5cddb42c-3dc8-4f5e-b854-456d9203a1d9" alt="" width="563"><figcaption></figcaption></figure>

These properties will shift the components along their respective X and Y axes. Any change to the **X Position** will move the component left and right; any changes to the **Y Position** will move the component up and down.&#x20;

If a component is dragged along the canvas, then the values in the inputs will live update to display their new position.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FTzHnjPKrRlTXL6spJcfu%2FLayout_and_Positioning_moving.gif?alt=media&#x26;token=7698f5fd-ed2e-4173-9d2c-3efd5fe61d45" alt="" width="563"><figcaption></figcaption></figure>

### Alignment

A new property added in 1.18, **Alignment** allows components to have fixed alignments to points on the canvas, both **Vertically** and **Horizontally**.

#### Horizontal Alignment

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F8C3JVgI9cnNSZtssRdDk%2FLayout_and_Positioning_Horizontal_Alignment.png?alt=media&#x26;token=77969b47-8338-440e-973a-1ed7c2f680bd" alt=""><figcaption></figcaption></figure>

**Horizontal Alignment** sets components to have a fixed position on the canvas. This can be:

* Left - fixes the position to the left side of the canvas
* Center - fixes the position to the center of the canvas
* Right - fixes the position to the right of the canvas
* Stretch - stretches the width of the component to fit the canvas width

{% hint style="info" %}
Once **Horizontal Alignment** has been set, components cannot be dragged/ moved left or right along the canvas, and will only move up or down.
{% endhint %}

#### Vertical Alignment

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FYCetTHLTUSxSXs98EK8b%2FLayout_and_Positioning_Vertical_Alignment.png?alt=media&#x26;token=1bae0002-bb88-4a4e-a166-70d782b5500e" alt=""><figcaption></figcaption></figure>

**Vertical Alignment** sets components to have a fixed position on the vertical axis of the canvas. This can be:

* Top - fixes the position to the top of the canvas
* Middle - fixes the position to the middle of the canvas
* Bottom - fixes the position to the bottom of the canvas
* Stretch - stretches the height of the component to fit in the canvas height

{% hint style="info" %}
Once **Vertical Alignment** has been set, components cannot be dragged/ moved up or down along the canvas, and will only move left or right.
{% endhint %}

A graphic will appear beside the alignment properties, once an alignment has been selected, to indicate the current behavior of the selected component.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F8P6OFbC07syHDd9K6Sla%2FLayout_and_Positioning_Alignment_diagram_single.png?alt=media&#x26;token=48820940-13e1-42f9-861c-70a88f82a7d5" alt=""><figcaption></figcaption></figure>

#### Multi-alignment

When applying multiple alignments to components, a graphic will appear beside the properties to indicate the current alignment set.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FJWmWeFxAiigSKa4bp4LA%2FLayout_and_Positioning_Alignment_diagram.png?alt=media&#x26;token=cc005855-ceaf-4ac0-9066-fecdceeb0704" alt=""><figcaption><p>In this example, the <em>Text Label 1</em> component is aligned to the left side of the canvas, and its vertical alignment is stretched to fit the height.</p></figcaption></figure>

{% hint style="info" %}
A brief description appears at the bottom of the alignment properties, explaining the current settings for the component alignment.
{% endhint %}