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

# Configurações de layout para alinhamento e espaçamento de elementos

> Controle as configurações de layout para alinhar elementos, gerenciar o espaçamento e criar landing pages limpas e responsivas com facilidade.

As configurações de Layout controlam **como os elementos são organizados dentro de um contêiner**.<br />É aqui que você decide se os itens ficam **lado a lado, empilhados, centralizados, espaçados 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>

## As 4 configurações principais

## 1. Direction (a mais importante)

Controla **como os itens são posicionados dentro do contêiner**.

### Horizontal (Row)

* Os elementos vão da **esquerda → direita**
* Exemplo: botões um ao lado do outro

👉 Use para:

* Linhas
* Elementos em linha
* Colunas lado a lado

### Vertical (Column)

* Os elementos vão de **cima → baixo**
* Exemplo: título → texto → botão

👉 Use para:

* Formulários
* Conteúdo empilhado
* A maioria dos layouts (padrão)

<Warning>
  Se algo não estiver alinhando corretamente, confira primeiro o Direction: esse é o problema número 1 dos usuários.
</Warning>

***

## 2. Distribution (espaço entre os itens)

Controla **como os itens são distribuídos ao longo do contêiner**.

Opções comuns:

* **Start** → os itens ficam no início
* **Center** → os itens ficam no meio
* **End** → os itens vão para o final
* **Space Between** → o primeiro à esquerda, o último à direita e espaço entre eles
* **Space Around** → espaço igual em volta dos itens

***

👉 Exemplo:

Se você tem 3 botões:

* Space Between → espalhados por toda a largura
* Center → agrupados no meio

***

## 3. Align Items (alinhamento)

Controla o alinhamento no **eixo oposto ao do Direction**.

### Se Direction = Row (horizontal):

* Align Items = alinhamento vertical
  * Topo
  * Centro
  * Base

***

### Se Direction = Column (vertical):

* Align Items = alinhamento horizontal
  * Esquerda
  * Centro
  * Direita

<Note>
  **Importante:**

  * Direction = eixo principal
  * Align Items = eixo transversal

  (É aqui que acontece a maior parte das confusões)
</Note>

***

## 4. Gap

* Controla o espaço **entre os elementos**
* Funciona como um espaçamento automático

👉 Exemplo:

* Gap = 20 → adiciona o mesmo espaço entre todos os itens

***

# Exemplos simples

### Exemplo 1: centralizar tudo

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

👉 Resultado: tudo perfeitamente centralizado

***

### Exemplo 2: botões em linha

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

👉 Resultado: botões distribuídos na horizontal

***

### Exemplo 3: layout simples de formulário

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

👉 Resultado: um formulário vertical limpo

***

## Erros comuns

❌ Tentar centralizar elementos sem mudar o Direction<br />❌ Confundir Align Items com Distribution<br />❌ Adicionar margin em vez de usar Gap<br />❌ Esquecer que o contêiner controla os elementos filhos

***

## Boas práticas

* Comece com **Column** na maioria dos layouts
* Use **Row só quando necessário**
* Use **Gap em vez de espaçamento manual**
* Mantenha os layouts simples e consistentes

<Note>
  **Regra de ouro:**<br />se algo parecer “errado”, quase sempre é:

  * Direction errado
  * Alinhamento errado
</Note>