> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajustes de Layout para alinear y espaciar elementos

> Controla los ajustes de diseño para alinear elementos, gestionar el espaciado y crear landing pages limpias y adaptables sin complicaciones.

Los ajustes de Layout controlan **cómo se organizan los elementos dentro de un contenedor**.<br />Aquí decides si los elementos van **uno al lado del otro, apilados, centrados, separados, etc.**

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/Cnvtc1TpBSCIUd3d/images/layout.png?fit=max&auto=format&n=Cnvtc1TpBSCIUd3d&q=85&s=afda0f90df4a03e3db8fe710c9032e0e" alt="Layout" width="1920" height="992" data-path="images/layout.png" />
</Frame>

## Los 4 ajustes clave

## 1. Direction (el más importante)

Controla **cómo se colocan los elementos dentro del contenedor**.

### Horizontal (fila)

* Los elementos van **de izquierda a derecha**
* Ejemplo: botones uno junto a otro

👉 Úsalo para:

* Filas
* Elementos en línea
* Columnas una al lado de la otra

### Vertical (columna)

* Los elementos van **de arriba abajo**
* Ejemplo: título → texto → botón

👉 Úsalo para:

* Formularios
* Contenido apilado
* La mayoría de los diseños (es la opción por defecto)

<Warning>
  Si algo no se alinea bien, revisa primero Direction: es el problema número 1 de los usuarios.
</Warning>

***

## 2. Distribution (espacio entre elementos)

Controla **cómo se reparten los elementos dentro del contenedor**.

Opciones habituales:

* **Start:** los elementos se pegan al principio
* **Center:** los elementos se quedan en el centro
* **End:** los elementos van al final
* **Space Between:** el primero a la izquierda, el último a la derecha y el espacio repartido en medio
* **Space Around:** espacio igual alrededor de cada elemento

***

👉 Ejemplo:

Si tienes 3 botones:

* Space Between → se reparten por todo el ancho
* Center → quedan agrupados en el centro

***

## 3. Align Items (alineación)

Controla la alineación en el **eje contrario al de Direction**.

### Si Direction = Row (horizontal):

* Align Items = alineación vertical
  * Arriba
  * Centro
  * Abajo

***

### Si Direction = Column (vertical):

* Align Items = alineación horizontal
  * Izquierda
  * Centro
  * Derecha

<Note>
  **Importante:**

  * Direction = eje principal
  * Align Items = eje transversal

  (Aquí es donde surge casi toda la confusión)
</Note>

***

## 4. Gap

* Controla el espacio **entre elementos**
* Funciona como un espaciado automático

👉 Ejemplo:

* Gap = 20 → añade el mismo espacio entre todos los elementos

***

# Ejemplos sencillos

### Ejemplo 1: centrarlo todo

* Direction: Vertical
* Align Items: Center
* Distribution: Center

👉 Resultado: todo perfectamente centrado

***

### Ejemplo 2: botones en fila

* Direction: Horizontal
* Distribution: Space Between
* Align Items: Center

👉 Resultado: los botones se reparten en horizontal

***

### Ejemplo 3: diseño de formulario sencillo

* Direction: Vertical
* Align Items: Left
* Gap: 10-20

👉 Resultado: un formulario vertical y limpio

***

## Errores habituales

❌ Intentar centrar elementos sin cambiar Direction<br />❌ Confundir Align Items con Distribution<br />❌ Añadir margin en lugar de usar Gap<br />❌ Olvidar que el contenedor controla a los elementos hijos

***

## Buenas prácticas

* Empieza con **Column** en la mayoría de los diseños
* Usa **Row solo cuando haga falta**
* Usa **Gap en lugar de espaciado manual**
* Mantén los diseños simples y coherentes

<Note>
  **Regla de oro:**<br />si algo se ve “mal”, casi siempre es por:

  * Un Direction incorrecto
  * Una alineación incorrecta
</Note>