1.1Contenedores y maquetación (flexbox)
Lo esencial en 30 segundos
- Dirección: los elementos se alinean en fila (horizontal) o en columna (vertical).
- Alineación: justify (eje principal) y align (eje secundario) sitúan los elementos (inicio, centro, fin, espaciado).
- Gap = el espacio entre elementos; wrap = los elementos pasan a la línea siguiente cuando falta sitio.
Hilo conductor — Nadia alinea la banda
Nadia quiere una banda: a la izquierda el logo y el nombre "Carpintería Benali", a la derecha un botón "Solicitar presupuesto", todo centrado verticalmente. Sin Flexbox, los elementos se apilan de cualquier manera. Descubre que dirección + alineación + gap bastan para cuadrarlo todo, sin una línea de CSS.
Continúa el nivel 0 — Nadia pasa de la teoría de las cajas a la práctica.
1. Dirección y alineación
El contenedor Flexbox fija primero su dirección: fila (los elementos uno al lado del otro, horizontalmente) o columna (apilados verticalmente). Luego la alineación: justify gestiona la posición en el eje principal (inicio, centro, fin, espaciado), align en el eje secundario. Para la banda de Nadia: dirección fila, justify "espaciado" (logo a la izquierda, botón a la derecha), align "centro" (alineados verticalmente).
Estos ajustes se hacen visualmente en la pestaña Disposición del contenedor — sin código. Ves el resultado moverse en directo en el lienzo.
2. Gap, wrap y anidamiento
El gap fija el espacio regular entre elementos (más limpio que márgenes individuales). El wrap permite a los elementos pasar a la línea siguiente cuando falta anchura — esencial para que tres tarjetas se vuelvan una columna en el móvil.
Por último, el anidamiento: un contenedor "fila" puede contener contenedores "columna". Nadia anida para obtener, en la banda, un bloque de texto (nombre + eslogan apilados) junto al botón.
🔎 Ejemplo concreto — Cuadrar la banda (caso Nadia)
Contenedor banda: dirección = fila
justify = espaciado (logo a la izquierda, botón a la derecha)
align = centro (alineados verticalmente)
gap = 20px; wrap = activado (para el móvil)
→ Resultado: banda nítida, lista para pasar a columna en pantalla pequeña.Resultado: una alineación profesional en 4 ajustes.
Lección: pensar dirección → alineación → gap → wrap.
Vocabulario de la sección
- Flexbox
- El sistema moderno que gestiona la disposición de los elementos dentro de un contenedor.
Ejemplo sencillo: Nadia alinea logo y botón de un borde al otro con Flexbox.
Lo que no es: posicionar los elementos al píxel con márgenes improvisados.
Reflejo: para alinear dentro de una caja, ajusta el Flexbox del contenedor.
- Dirección
- Sentido de alineación de los elementos: en fila (horizontal) o en columna (vertical).
Ejemplo sencillo: banda en fila; lista de servicios en columna.
Lo que no es: creer que solo se puede alinear horizontalmente.
Reflejo: uno al lado del otro = fila; apilado = columna.
- Alineación (justify / align)
- justify sitúa en el eje principal, align en el secundario (inicio, centro, fin, espaciado).
Ejemplo sencillo: justify "espaciado" aleja logo y botón; align "centro" los alinea verticalmente.
Lo que no es: añadir márgenes al azar para "empujar" un elemento.
Reflejo: justify = a lo largo de la dirección; align = a través.
- Gap / Wrap
- Gap: el espacio regular entre elementos. Wrap: permite el salto de línea cuando falta sitio.
Ejemplo sencillo: gap de 20px entre 3 tarjetas; wrap para que se apilen en el móvil.
Lo que no es: poner un margen distinto en cada elemento en vez de un gap.
Reflejo: espacio regular → gap; adaptación móvil → wrap.
- Anidamiento
- Un contenedor dentro de un contenedor (p. ej. una fila que contiene columnas).
Ejemplo sencillo: en la banda, un contenedor "texto" (nombre + eslogan) junto al botón.
Lo que no es: apilar contenedores sin necesidad real.
Reflejo: anida cuando un grupo de elementos debe comportarse en conjunto.
En la práctica — Construir una banda en Flexbox
- Crea un contenedor, ajusta su dirección a "fila".
- Coloca un logo/texto a la izquierda y un botón a la derecha; ajusta justify a "espaciado".
- Ajusta align a "centro" para alinear verticalmente.
- Añade un gap y activa wrap para anticipar el móvil.
Guion listo para decir — justificar una elección de maquetación (20 s)
"Su banda pone el nombre a la izquierda y el botón de presupuesto a la derecha, bien visibles y alineados. En el móvil, los elementos pasarán automáticamente uno debajo de otro para seguir siendo legibles. Todo está ajustado con limpieza, sin apaños."
Liga cada ajuste a un beneficio concreto (legibilidad, móvil).
Plantilla para copiar y pegar — ajustes de un contenedor
CONTENEDOR: _______________
DIRECCIÓN: fila / columna
JUSTIFY (eje principal): inicio / centro / fin / espaciado
ALIGN (eje secundario): inicio / centro / fin / estirado
GAP: ____ px
WRAP: activado / desactivado
¿ANIDAMIENTO? (subcontenedores): _______________Banda
Fila, justify espaciado, align centro: logo de un lado, acción del otro.
Lista de servicios
Columna, gap regular: cada servicio apilado, con aire.
Rejilla de tarjetas
Fila + wrap: 3 tarjetas en línea que se apilan en el móvil.
Centrar un bloque
justify centro + align centro: un bloque perfectamente centrado en su contenedor.
✓ Buenas prácticas
- Prefiere el gap a los márgenes individuales.
- Activa wrap para anticipar el móvil.
- Anida solo cuando un grupo debe moverse en conjunto.
✗ Errores frecuentes
- Empujar elementos con márgenes en vez de justify/align.
- Olvidar wrap y romper la visualización móvil.
- Sobre-anidar contenedores.
Puntos clave
- Dirección: fila o columna.
- justify (eje principal) y align (eje secundario).
- gap = espacio regular; wrap = salto de línea.
- Todo se ajusta visualmente, sin CSS.
Reto 48h — aplica mañana
Construye una banda (logo + botón) alineada con dirección fila, justify "espaciado", align "centro" y un gap. Activa wrap y comprueba el resultado móvil en la vista previa. 20 minutos.
- Ajusto dirección, justify y align de un contenedor.
- Uso gap y wrap con criterio.
- Anido cuando la maquetación lo exige.
Preguntas frecuentes
¿Debo conocer CSS para usar Flexbox en Elementor?
No: todo se ajusta visualmente (dirección, justify/align, gap, wrap) en la pestaña Disposición. Conocer los términos ayuda, pero no se requiere código.
¿Qué diferencia hay entre justify y align?
justify actúa sobre el eje principal (el sentido de la dirección), align sobre el eje secundario (perpendicular). En fila: justify = horizontal, align = vertical.
¿Para qué sirve wrap?
Para permitir que los elementos pasen a la línea siguiente cuando falta anchura — indispensable para que una fila de tarjetas se apile con limpieza en el móvil.
Nadia quiere el logo a la izquierda y el botón "presupuesto" a la derecha, alineados verticalmente. ¿Qué ajustes del contenedor?