Panel de Control
Contenido principal del dashboard...
🎯 Distribución de Elementos
En este ejercicio aprenderás a controlar cómo se distribuyen los elementos dentro de un contenedor
flex usando las propiedades justify-content y align-items.
1. Justify Content - Distribución Horizontal
Controla la distribución de elementos en el eje principal (horizontal por defecto).
Space Between - Espacio entre elementos:
Inicio
Centro
Final
Space Around - Espacio alrededor:
Elemento 1
Elemento 2
Elemento 3
Space Evenly - Espacio uniforme:
Uno
Dos
Tres
2. Align Items - Alineación Vertical
Controla la alineación de elementos en el eje transversal (vertical por defecto).
Stretch - Estirar (por defecto):
Corto
Alto
Corto
Center - Centrar:
Corto
Alto
Corto
Baseline - Línea base:
Texto
Texto Alto
Texto
3. Combinaciones de Distribución
Combina diferentes valores de justify-content y align-items.
Centrado perfecto:
Centrado
Distribuido horizontalmente, centrado verticalmente:
Izquierda
Centro
Derecha
Espaciado uniforme, alineado al inicio:
Uno
Dos
Tres
4. Layout de Cards con Flexbox
Crea un layout de cards que se adapte automáticamente.
Card 1
Contenido de la primera card con texto de ejemplo.
Card 2
Contenido de la segunda card con más texto para demostrar el comportamiento.
Card 3
Contenido de la tercera card.
5. Header Completo con Flexbox
Crea un header que use diferentes tipos de distribución.
Logo
🎯 Ejercicio Práctico
Crea un dashboard con los siguientes elementos distribuidos usando flexbox:
- Una barra lateral con navegación
- Un área de contenido principal
- Una barra superior con información del usuario
- Un área de widgets en la parte inferior