Skip to main content
Los ajustes de Layout controlan cómo se organizan los elementos dentro de un contenedor.
Aquí decides si los elementos van uno al lado del otro, apilados, centrados, separados, etc.
Layout

​
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)
Si algo no se alinea bien, revisa primero Direction: es el problema número 1 de los usuarios.

​
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
Importante:
  • Direction = eje principal
  • Align Items = eje transversal
(Aquí es donde surge casi toda la confusión)

​
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
❌ Confundir Align Items con Distribution
❌ Añadir margin en lugar de usar Gap
❌ 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
Regla de oro:
si algo se ve “mal”, casi siempre es por:
  • Un Direction incorrecto
  • Una alineación incorrecta