As configurações de Layout controlam como os elementos são organizados dentro de um contêiner.
É aqui que você decide se os itens ficam lado a lado, empilhados, centralizados, espaçados etc.

​

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)

---

​

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

---

​

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
❌ Confundir Align Items com Distribution
❌ Adicionar margin em vez de usar Gap
❌ 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