📍 Tipos de Posicionamiento CSS
Position: Static (por defecto)
Los elementos siguen el flujo normal del documento.
Position: Relative
El elemento se mueve desde su posición normal.
Position: Absolute
Los elementos se posicionan relativos al contenedor padre.
Position: Fixed
El elemento se mantiene fijo en la ventana del navegador.
🎪 Flexbox - CSS Flexible Box Layout
Flex Direction
Controla la dirección del eje principal (row/column).
Justify Content
Alinea elementos en el eje principal.
Align Items
Alinea elementos en el eje transversal.
Flex Grow & Shrink
Controla cómo los elementos crecen y se encogen.
💡 Ejemplos Prácticos
Layout con Sidebar usando Flexbox
Contenido Principal
Este es el contenido principal que se ajusta automáticamente al espacio disponible. El sidebar tiene un ancho fijo y el contenido toma el resto del espacio.
Este layout se crea fácilmente usando flexbox con display: flex en el
contenedor padre.
Centrado Perfecto con Flexbox
Centrado Perfecto
Este elemento está perfectamente centrado tanto horizontal como verticalmente usando flexbox.
Cards Responsive con Flexbox
Card 1
Contenido de la primera card.
Card 2
Contenido de la segunda card.
Card 3
Contenido de la tercera card.