CSS Surgeon
Arregla layouts rotos. Domina Flexbox y Grid.
A la izquierda verás un layout roto y a la derecha el editor de código. Escribe CSS para igualar el layout objetivo. Usa las pills de propiedades para insertar rápido. Pulsa Comprobar para avanzar. Buena suerte, Cirujano.
O Sangramento
Guía definitiva de Flexbox: dominar layouts CSS responsive
Mejora tu CSS con desafíos interactivos. Esta guía cubre Flexbox, Grid y posicionamiento—herramientas esenciales para construir layouts modernos y responsive. Ideal para desarrolladores junior y quien quiera corregir layouts rotos con confianza.
Tutorial de CSS Flexbox
Flexbox es un modelo de layout unidimensional que distribuye espacio y alinea elementos dentro de un contenedor. Usa display: flex para convertir cualquier elemento en contenedor flex. Propiedades clave: justify-content (eje principal), align-items (eje transversal) y gap para espaciado entre items.
Práctica de CSS Grid
Grid es un sistema de layout bidimensional. Usa grid-template-columns y grid-template-rows para definir pistas. Combina con Flexbox cuando necesites control en fila y columna.
Corregir problemas de layout CSS
Los fallos de layout suelen venir de valores ausentes o incorrectos en display, posicionamiento o alineación. Revisa siempre display, position y z-index cuando los elementos no aparecen donde esperas.
Posicionamiento CSS explicado
position: absolute saca el elemento del flujo. position: relative mantiene el elemento en flujo pero permite desplazamiento. Usa z-index para controlar el orden de apilado.
Palabras clave: tutorial Flexbox CSS, práctica CSS Grid, corregir layout CSS, desafíos CSS para desarrolladores, diseño responsive, posicionamiento CSS.