ejer3-ejer1.html
📚 EXPLICACIÓN DETALLADA DE CÓMO FUNCIONA
La arquitectura Flexbox (visualizada)
PÁGINA COMPLETA: ┌────────────────────────────────────────────────────────┐ │ BODY (fondo gris, borde rojo, padding 20px) │ │ ┌──────────────────────────────────────────────────┐ │ │ │ .cards-container (display: flex) │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Tarjeta1 │ │ Tarjeta2 │ │ Tarjeta3 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Header │ │ Header │ │ Header │ │ │ │ │ │──────────│ │──────────│ │──────────│ │ │ │ │ │ Body │ │ Body │ │ Body │ │ │ │ │ │ (flex:1) │ │ (flex:1) │ │ (flex:1) │ │ │ │ │ │──────────│ │──────────│ │──────────│ │ │ │ │ │ Footer │ │ Footer │ │ Footer │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ │ │ └──────────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────┘
El secreto de flex: 1 en .card-body
Esta es la propiedad MÁS IMPORTANTE del diseño. Sin ella:
❌ SIN flex:1 (los footers quedan desalineados):
┌─────────┐ ┌─────────┐ ┌─────────┐
│ Header │ │ Header │ │ Header │
├─────────┤ ├─────────┤ ├─────────┤
│ Body │ │ Body │ │ Body │
│ (poco │ │ (poco │ │ (MUCHO │
│ texto) │ │ texto) │ │ texto) │
├─────────┤ ├─────────┤ ├─────────┤
│ Footer │ │ Footer │ │ texto │
└─────────┘ └─────────┘ │ extra │
├─────────┤
│ Footer │
└─────────┘✅ CON flex:1 (todos los footers a la misma altura): ┌─────────┐ ┌─────────┐ ┌─────────┐ │ Header │ │ Header │ │ Header │ ├─────────┤ ├─────────┤ ├─────────┤ │ │ │ │ │ Body │ │ Body │ │ Body │ │ con │ │ se │ │ se │ │ MUCHO │ │ expande │ │ expande │ │ texto │ ├─────────┤ ├─────────┤ ├─────────┤ │ Footer │ │ Footer │ │ Footer │ ← ¡Todos igual! └─────────┘ └─────────┘ └─────────┘
🧠 MÉTODO PARA APRENDER Y MEMORIZAR
Técnica 1: La "Regla de los 3 niveles"
Memoriza este patrón que se repite en TODOS los diseños con tarjetas:
| Nivel | Elemento | Propiedades clave | Frase para recordar |
|---|---|---|---|
| Nivel 1 | Contenedor padre | display: flexjustify-content: centergap: 20px | "Papá flex centra y separa" |
| Nivel 2 | Tarjeta | display: flexflex-direction: columnwidth: 300px | "Tarjeta apila y tiene ancho" |
| Nivel 3 | Body de tarjeta | flex: 1 | "Body se come el espacio ★" |
Técnica 2: Asociaciones visuales (mnemotecnia)
display: flex → 🦸♂️ "El superpoder que ordena"
justify-content → 📏 "Regla horizontal" (izquierda, centro, derecha)
align-items → 📐 "Escuadra vertical" (arriba, centro, abajo, estirar)
gap → ⬜ "Hueco entre los dedos"
flex-direction → 🧱 "Dirección de los ladrillos" (row = fila, column = columna)
flex: 1 → 🍕 "Se come la porción que sobra"
border-radius → 🔘 "Esquinas redondas como pastilla"
box-shadow → 🌑 "Sombra que da profundidad"Técnica 3: El método de "construcción por capas" (memoriza este orden)
CAPA 1: RESET UNIVERSAL (siempre igual)
* { margin:0; padding:0; box-sizing: border-box; }
CAPA 2: BODY (fondo y espacio)
body { background-color: #f0f0f0; padding: 20px; }
CAPA 3: CONTENEDOR PADRE (organiza horizontalmente)
.contenedor {
display: flex;
justify-content: center;
gap: 20px;
}
CAPA 4: TARJETA (organiza verticalmente)
.tarjeta {
display: flex;
flex-direction: column;
width: 300px;
}
CAPA 5: DISTRIBUCIÓN INTERNA (clave)
.header { /* sin propiedad especial */ }
.body { flex: 1; } ← ¡LA MÁS IMPORTANTE!
.footer { /* sin propiedad especial */ }Técnica 4: Práctica de "5 minutos diarios" (plan de una semana)
| Día | Actividad | Tiempo |
|---|---|---|
| Lunes | Escribe el RESET de memoria (margin:0; padding:0; box-sizing:border-box) | 5 min |
| Martes | Escribe el contenedor padre (display:flex; justify-content:center; gap:20px) | 5 min |
| Miércoles | Escribe la tarjeta (display:flex; flex-direction:column; width:300px) | 5 min |
| Jueves | Escribe el body con flex:1 (¡la propiedad clave!) | 5 min |
| Viernes | Escribe TODO el código desde cero sin mirar | 15 min |
| Sábado | Crea 3 tarjetas diferentes (cambia colores, tamaños, contenido) | 20 min |
| Domingo | Explica en voz alta cómo funciona a alguien más | 15 min |
Técnica 5: Preguntas de autoevaluación
Responde estas preguntas con tus propias palabras:
¿Qué pasa si elimino
flex: 1del.card-body?Respuesta: Los footers de las tarjetas quedarían a diferentes alturas, desalineados
¿Qué hace
justify-content: centeren el contenedor?Respuesta: Centra horizontalmente todas las tarjetas dentro del contenedor
¿Para qué sirve
gap: 20px?Respuesta: Crea un espacio de 20px ENTRE cada tarjeta
¿Qué diferencia hay entre
justify-contentyalign-items?Respuesta:
justify-contentalinea en el eje PRINCIPAL (horizontal con row),align-itemsalinea en el eje CRUZADO (vertical con row)
¿Por qué usamos
box-sizing: border-box?Respuesta: Para que el padding y border se incluyan dentro del ancho total, facilitando el diseño
Técnica 6: El "esqueleto mental" que debes memorizar
/* Memoriza este patrón - es la BASE de todos los diseños con tarjetas */
/* 1. RESET */
* { margin:0; padding:0; box-sizing: border-box; }
/* 2. CONTENEDOR PADRE */
.contenedor {
display: flex; /* Activa flex */
justify-content: center; /* Centra horizontal */
gap: 20px; /* Espacio entre tarjetas */
}
/* 3. TARJETA */
.tarjeta {
display: flex; /* Activa flex interno */
flex-direction: column; /* Apila vertical */
width: 300px; /* Ancho fijo */
}
/* 4. CUERPO EXPANDIBLE */
.tarjeta-body {
flex: 1; /* ← CLAVE: se expande */
}Técnica 7: La prueba del "lápiz y papel"
Dibuja este diagrama en un papel sin mirar el código:
┌─────────────────────────────────────────────────┐ │ BODY (fondo gris, borde rojo, padding 20) │ │ ┌───────────────────────────────────────────┐ │ │ │ .cards-container │ │ │ │ display: flex │ │ │ │ justify-content: center │ │ │ │ gap: 20px │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ │ │ Card 1 │ │ Card 2 │ │ Card 3 │ │ │ │ │ │ flex │ │ flex │ │ flex │ │ │ │ │ │ column │ │ column │ │ column │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ Header │ │ Header │ │ Header │ │ │ │ │ ├─────────┤ ├─────────┤ ├─────────┤ │ │ │ │ │ Body │ │ Body │ │ Body │ │ │ │ │ │ flex:1 │ │ flex:1 │ │ flex:1 │ │ │ │ │ ├─────────┤ ├─────────┤ ├─────────┤ │ │ │ │ │ Footer │ │ Footer │ │ Footer │ │ │ │ │ └─────────┘ └─────────┘ └─────────┘ │ │ │ └───────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘
Técnica 8: Las 7 líneas de CSS que debes saber de memoria
/* REPITE ESTAS 7 LÍNEAS TODOS LOS DÍAS */
* { margin: 0; padding: 0; box-sizing: border-box; } /* Línea 1 */
body { background-color: #f0f0f0; padding: 20px; } /* Línea 2 */
.container { display: flex; justify-content: center; gap: 20px; } /* Línea 3 */
.card { display: flex; flex-direction: column; width: 300px; } /* Línea 4 */
.card-header { background-color: #f8f9fa; padding: 10px; } /* Línea 5 */
.card-body { padding: 10px; flex: 1; } /* Línea 6 ★ */
.card-footer { border-top: 1px solid #dee2e6; padding: 10px; } /* Línea 7 */🎯 Resumen final
Lo que DEBES memorizar hoy:
flex: 1es la propiedad más importante → hace que el body se expandadisplay: flexen el padre → organiza tarjetas horizontalmenteflex-direction: columnen la tarjeta → apila header, body, footerjustify-content: center→ centra horizontalmentegap: 20px→ espacio entre tarjetas
Ejercicio de memorización final:
Escribe este código en un papel 5 veces seguidas:
.card-body {
flex: 1; /* Hace que el body ocupe el espacio restante */
}Repite esta línea en voz alta 10 veces: "Flex uno se come el espacio, alinea los footers con buen tino" 🚀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- Define la codificación UTF-8 para soportar caracteres especiales (ñ, tildes, emojis) --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace la página responsive en dispositivos móviles --> <title>Document</title> <!-- Título que aparece en la pestaña del navegador --> </head> <style> /* ============================================================ RESET UNIVERSAL - Elimina márgenes y paddings por defecto ============================================================ */ * { margin: 0; /* Elimina el margen EXTERNO predeterminado de TODOS los elementos HTML */ padding: 0; /* Elimina el padding INTERNO predeterminado de TODOS los elementos HTML */ box-sizing: border-box; /* Hace que el ancho/alto TOTAL incluyan padding y border, no solo el contenido */ /* Ejemplo: un div con width:100px + padding:10px tendrá ancho TOTAL = 100px (no 120px) */ } /* ============================================================ ESTILOS DEL BODY - Cuerpo principal de la página ============================================================ */ body { background-color: #f0f0f0; /* Color gris claro de fondo para toda la página */ border: 5px solid red; /* Borde rojo temporal (ÚTIL PARA DEPURACIÓN: muestra los límites exactos del body) */ padding: 20px; /* Espacio interno de 20px alrededor de TODO el contenido, separa del borde rojo */ } /* ============================================================ CONTENEDOR PRINCIPAL DE TARJETAS (PADRE FLEX) ============================================================ */ .cards-container { display: flex; /* Activa Flexbox para alinear las tarjetas horizontalmente */ justify-content: center; /* Centra horizontalmente TODAS las tarjetas como grupo dentro del contenedor */ gap: 20px; /* Espacio de 20px ENTRE cada tarjeta (no en los bordes externos) */ align-items: stretch; /* Hace que TODAS las tarjetas tengan la MISMA altura (la del más alto) */ /* stretch es el valor por defecto, pero lo escribimos explícitamente para claridad */ } /* ============================================================ TARJETA INDIVIDUAL (HIJO FLEX) ============================================================ */ .card-uno { background-color: white; /* Fondo blanco para cada tarjeta (contrasta con fondo gris del body) */ margin-top: 20px; /* Margen superior de 20px separa las tarjetas del borde superior del contenedor */ display: flex; /* Activa Flexbox DENTRO de la tarjeta para organizar su contenido interno */ flex-direction: column; /* Organiza el contenido VERTICALMENTE (header arriba, body medio, footer abajo) */ width: 300px; /* Ancho fijo de 300px para TODAS las tarjetas (uniformidad) */ border-radius: 12px; /* Bordes redondeados de 12px en las 4 esquinas (aspecto moderno) */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra: desplazamiento X=0, Y=2px, difuminado=5px, color negro 10% opaco */ } /* ============================================================ HEADER DE LA TARJETA (Parte superior - Título) ============================================================ */ .card-header { background-color: #f8f9fa; /* Color gris muy claro (casi blanco) para el fondo del header */ border-bottom: 1px solid #dee2e6; /* Línea divisoria inferior: 1px sólido gris claro (separa header de body) */ padding: 10px; /* Espacio interno de 10px alrededor del contenido del header */ } /* ============================================================ BODY DE LA TARJETA (Parte central - CONTENIDO PRINCIPAL) ============================================================ */ .card-body { padding: 10px; /* Espacio interno de 10px alrededor del contenido del body */ flex: 1; /* ¡PROPIEDAD CLAVE! Hace que el body ocupe TODO el espacio disponible */ /* flex:1 equivale a: flex-grow: 1, flex-shrink: 1, flex-basis: 0% */ /* Esto significa: el body se EXPANDE para ocupar el espacio ENTRE header y footer */ } /* ============================================================ FOOTER DE LA TARJETA (Parte inferior - Botones/Enlaces) ============================================================ */ .card-footer { border-top: 1px solid #dee2e6; /* Línea divisoria superior: 1px sólido gris claro (separa body de footer) */ padding: 10px; /* Espacio interno de 10px alrededor del contenido del footer */ background-color: #f8f9fa; /* Color gris muy claro para el fondo del footer (coincide con header) */ } /* ============================================================ NOTA: Faltan estilos para mejorar la experiencia: - Los enlaces <a> no tienen estilo (aparecen como texto azul subrayado por defecto) - No hay efecto hover en los botones/enlaces - El footer debería tener display:flex para que el botón ocupe todo el ancho Para mejorarlo, agregarías: .card-footer { display: flex; /* Para alinear el contenido */ } a { text-decoration: none; /* Quitar subrayado */ background-color: #007bff; /* Fondo azul */ color: white; /* Texto blanco */ padding: 8px; /* Espacio interno */ border-radius: 6px; /* Bordes redondeados */ text-align: center; /* Centrar texto */ flex: 1; /* Ocupar todo el espacio */ } a:hover { background-color: #0056b3; /* Azul más oscuro al pasar el mouse */ } ============================================================ */ </style> <body> <div class="cards-container"> <!-- TARJETA 1: Secretaria --> <div class="card-uno"> <div class="card-header"> <h3>Secretaria</h3> <!-- Título de la cabecera --> </div> <div class="card-body"> <p>Iniciar sesion</p> <!-- Texto de instrucción en el cuerpo --> </div> <div class="card-footer"> <a>Ingresar</a> <!-- Enlace de ingreso (sin href por ahora) --> </div> </div> <!-- TARJETA 2: Secretaria (idéntica a la primera) --> <div class="card-uno"> <div class="card-header"> <h3>Secretaria</h3> </div> <div class="card-body"> <p>Iniciar sesion</p> </div> <div class="card-footer"> <a>Ingresar</a> </div> </div> <!-- TARJETA 3: Secretaria (idéntica a la primera) --> <div class="card-uno"> <div class="card-header"> <h3>Secretaria</h3> </div> <div class="card-body"> <p>Iniciar sesion</p> </div> <div class="card-footer"> <a>Ingresar</a> </div> </div> </div> </body> </html>
Comentarios
Publicar un comentario