ejer-03-card-flex



 

Explicación de cómo funciona

Estructura visual de una tarjeta

Cada tarjeta .card-uno es un contenedor Flexbox en columna que organiza tres secciones:

  1. Header (cabecera): Título o encabezado

  2. Body (cuerpo): Contenido principal que se expande automáticamente gracias a flex: 1

  3. Footer (pie): Contiene el botón/enlace, también organizado con Flexbox

El secreto: flex: 1 en .card-body

  • Hace que el cuerpo ocupe todo el espacio sobrante entre header y footer

  • Si una tarjeta tiene poco texto y otra mucho, ambas se ven equilibradas porque el cuerpo se estira

  • Sin esta propiedad, los footers quedarían desalineados (uno más arriba que otro)

Botones y enlaces unificados

  • .btn-ingresar se aplica tanto a <a> como a <button>

  • En el footer, display: flex + flex: 1 en el botón hace que ocupe todo el ancho

🧠 Método para aprender y memorizar

1. Aprende haciendo (proyectos pequeños)

  • Repite este código escribiéndolo a mano línea por línea

  • Modifica colores, tamaños, espaciados y observa los cambios

  • Crea 5 tarjetas similares con diferentes contenidos

2. Memoriza conceptos clave (no líneas sueltas)

ConceptoSignificadoCómo recordarlo
display: flexActiva el modo flexible"Flex = flexible, organiza hijos"
flex: 1Ocupa espacio sobrante"El 1 significa 'una parte del pastel'"
flex-direction: columnOrganiza verticalmente"Columna = arriba a abajo"
justify-content: centerCentra horizontal"Justificar = alinear"
gap: 20pxEspacio entre elementos"Gap = hueco"

3. Técnica de "bloques lógicos"

Divide el CSS en estos 5 bloques y APRENDE UNO POR DÍA:

  1. Reset universal (* { margin:0; padding:0; ... })

  2. Layout contenedor (.cards-container con flex)

  3. Estructura tarjeta (.card-uno + header/body/footer)

  4. Botones e interacciones (.btn-ingresar + hover)

  5. Componentes específicos (estadísticas, subtítulos)

4. Asociaciones visuales (mnemotecnia)

  • box-sizing: border-box → "La caja incluye el borde, como una pizza con borde incluido"

  • flex: 1 → "El pulpo que estira sus tentáculos para llenar el espacio"

  • cursor: pointer → "La manita que dice '¡clícame!'"

5. Práctica activa diaria (15 minutos)

css
/* Reto: Cada día modifica algo */
/* Día 1: Cambia el color azul del botón a verde */
/* Día 2: Aumenta el gap entre tarjetas a 40px */
/* Día 3: Agrega un borde redondeado más grande */
/* Día 4: Añade una nueva tarjeta con otro contenido */

6. Herramientas de depuración (aprende usándolas)

  • Abre Inspeccionar elemento (F12) en el navegador

  • Activa/desactiva flex: 1 para VER cómo cambia todo

  • Dale a los elementos bordes de colores temporales (border: 2px solid red) para ver sus dimensiones reales

7. Regla mnemotécnica para propiedades Flexbox

"MAYO JEFE AL" (para recordar las propiedades principales):

  • Margin / Padding (separación interna/externa)

  • Align-items (alineación vertical)

  • Justify-content (alineación horizontal)

  • Flex-direction (dirección)

  • Gap (espacios)

  • Wrap (ajuste de líneas)

📝 Plan de estudio recomendado (1 semana)

  • Lunes: Escribe el reset universal y body. Comprende qué hace cada línea.

  • Martes: Crea el .cards-container y una sola tarjeta. Experimenta con justify-content.

  • Miércoles: Añade header, body, footer. Introduce flex: 1 en body. Observa cómo se alinean los footers.

  • Jueves: Estiliza botones y añade hover. Prueba con <a> y <button>.

  • Viernes: Crea los componentes adicionales (estadísticas, subtítulos).

  • Sábado: Construye una página nueva desde cero usando solo lo que recuerdas.

  • Domingo: Mezcla todo: crea 6 tarjetas diferentes con distintos contenidos.

La clave está en la repetición espaciada: hacer pequeños ejercicios cada día > estudiar 5 horas un solo día. ¡Tú puedes! 🚀

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> <!-- Define la codificación de caracteres UTF-8 para soportar caracteres especiales -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Hace que la página sea responsive en móviles -->
    <title>Document</title> <!-- Título de la página que aparece en la pestaña del navegador -->
</head>
<style>
    /* ============================================
       RESETEO BÁSICO (Universal)
       ============================================ */
    * {
        margin: 0;          /* Elimina todo margen exterior por defecto de todos los elementos */
        padding: 0;         /* Elimina todo relleno interior por defecto de todos los elementos */
        box-sizing: border-box; /* Hace que el ancho/alto incluyan bordes y rellenos, no solo el contenido */
    }

    /* ============================================
       ESTILOS DEL CUERPO DE LA PÁGINA
       ============================================ */
    body {
        background-color: #f0f0f0; /* Color gris claro de fondo para toda la página */
        border: 5px solid red;     /* Borde rojo de 5px para visualizar los límites del body */
        padding: 20px;             /* Espacio interno de 20px alrededor del contenido del body */
    }

    /* ============================================
       CONTENEDOR PRINCIPAL DE TARJETAS (FLEXBOX)
       ============================================ */
    .cards-container {
        display: flex;              /* Activa Flexbox para alinear las tarjetas horizontalmente */
        justify-content: center;   /* Centra las tarjetas horizontalmente dentro del contenedor */
        gap: 20px;                 /* Espacio de 20px entre cada tarjeta */
        /* align-items: stretch;    (Comentado) Si se activa, hace que todas las tarjetas tengan la misma altura */
    }

    /* ============================================
       ESTILO BASE DE CADA TARJETA
       ============================================ */
    .card-uno {
        background-color: white;    /* Fondo blanco para cada tarjeta */
        margin-top: 20px;           /* Margen superior de 20px separa tarjetas de bordes superiores */
        display: flex;              /* Activa Flexbox DENTRO de la tarjeta para organizar header, body, footer verticalmente */
        flex-direction: column;     /* Organiza los hijos en columna (vertical: header arriba, body medio, footer abajo) */
        width: 300px;               /* Ancho fijo de 300px para todas las tarjetas */
        border-radius: 12px;        /* Bordes redondeados de 12px para un aspecto moderno */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil: desplazamiento X 0, Y 2px, difuminado 5px, color negro 10% opaco */
    }

    /* ============================================
       CABECERA DE LA TARJETA
       ============================================ */
    .card-header {
        background-color: #f8f9fa;  /* Color gris muy claro para el fondo de la cabecera */
        border-bottom: 1px solid #dee2e6; /* Línea divisoria inferior gris de 1px */
        padding: 10px;              /* Espacio interno de 10px alrededor del contenido de la cabecera */
    }

    /* ============================================
       CUERPO PRINCIPAL DE LA TARJETA (ZONA FLEXIBLE)
       ============================================ */
    .card-body {
        padding: 10px;              /* Espacio interno de 10px alrededor del contenido del cuerpo */
        flex: 1;                    /* ¡PROPIEDAD CLAVE! Hace que el body ocupe TODO el espacio disponible 
                                       entre header y footer. Si el contenido es poco, se estira para empujar el footer abajo.
                                       Equivale a: flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
    }

    /* ============================================
       PIE DE TARJETA (FOOTER)
       ============================================ */
    .card-footer {
        border-top: 1px solid #dee2e6; /* Línea divisoria superior gris de 1px */
        padding: 10px;                 /* Espacio interno de 10px alrededor del contenido del footer */
        background-color: #f8f9fa;     /* Fondo gris claro igual que el header para consistencia visual */
        display: flex;                 /* Activa Flexbox dentro del footer para alinear el botón/enlace horizontalmente */
    }

    /* ============================================
       BOTÓN / ENLACE DE INGRESO (Estilo uniforme para button y a)
       ============================================ */
    .btn-ingresar {
        flex: 1;                    /* Hace que el botón o enlace ocupe TODO el espacio disponible dentro del footer */
        width: 100%;                /* Ancho completo del contenedor padre (por si flex falla) */
        padding: 8px;               /* Espacio interno: 8px arriba/abajo, 8px izquierda/derecha */
        background-color: #007bff;  /* Color azul primario (Bootstrap blue) para el fondo del botón */
        color: white;               /* Texto en color blanco para máximo contraste sobre fondo azul */
        border: none;               /* Elimina el borde predeterminado que traen los botones HTML */
        border-radius: 6px;         /* Bordes ligeramente redondeados de 6px para suavizar el diseño */
        cursor: pointer;            /* Cambia el cursor a "mano" al pasar por encima (indica elemento clickeable) */
        transition: background-color 0.3s; /* Transición suave de 0.3 segundos al cambiar color de fondo */
        text-align: center;         /* Centra el texto horizontalmente dentro del botón */
    }
    
    /* ============================================
       ESTILOS PARA ENLACES <a> (Hipervínculos)
       ============================================ */
    a {
        text-decoration: none;      /* Elimina el subrayado predeterminado que los navegadores ponen a los enlaces */
        width: 100%;                /* Asegura que el enlace ocupe todo el ancho disponible de su contenedor (el footer) */
    }
    
    /* ============================================
       EFECTO HOVER PARA BOTÓN (al pasar el mouse)
       ============================================ */
    .btn-ingresar:hover {
        background-color: #0056b3;  /* Cambia el fondo azul a un azul más oscuro cuando el mouse está encima */
    }
    
    /* ============================================
       ESTILOS PARA CONTENEDOR DE ESTADÍSTICAS
       ============================================ */
    .stats-container {
        display: flex;              /* Activa Flexbox para poner los dos cuadros de estadísticas uno al lado del otro */
        justify-content: space-around; /* Distribuye el espacio uniformemente alrededor de cada ítem */
        gap: 10px;                 /* Espacio de 10px entre cada ítem de estadística */
    }
    
    /* ============================================
       CADA ÍTEM DE ESTADÍSTICA (caja individual)
       ============================================ */
    .stat-item {
        text-align: center;         /* Centra el texto dentro de cada ítem (número y etiqueta) */
        flex: 1;                    /* Hace que cada ítem ocupe el mismo espacio (se reparten el ancho equitativamente) */
        background-color: #e9ecef;  /* Fondo gris claro para destacar las estadísticas */
        padding: 10px;              /* Espacio interno de 10px alrededor del contenido del ítem */
        border-radius: 8px;         /* Bordes redondeados de 8px para cada ítem */
    }
    
    /* ============================================
       NÚMERO GRANDE DE LA ESTADÍSTICA
       ============================================ */
    .stat-number {
        font-size: 24px;            /* Tamaño de fuente grande de 24px para destacar el número */
        font-weight: bold;          /* Negrita para que el número resalte aún más */
        color: #007bff;             /* Color azul igual que el botón para mantener consistencia de diseño */
    }
    
    /* ============================================
       ETIQUETA DE LA ESTADÍSTICA
       ============================================ */
    .stat-label {
        font-size: 12px;            /* Tamaño de fuente pequeño de 12px para la descripción */
        color: #6c757d;             /* Color gris oscuro para que no compita con el número grande */
        margin-top: 5px;            /* Margen superior de 5px para separar la etiqueta del número */
    }
    
    /* ============================================
       ESTILO PARA SUBTÍTULO DE ROL (Inicie Sesión)
       ============================================ */
    .rol-subtitulo {
        font-size: 14px;            /* Tamaño de fuente mediano de 14px */
        color: #28a745;             /* Color verde para diferenciarlo de otros textos */
        text-align: center;         /* Centra el texto horizontalmente */
        margin: 10px 0;             /* Margen vertical de 10px (arriba y abajo), márgenes horizontales 0 */
    }
</style>

<body>
    <!-- Contenedor principal que agrupa todas las tarjetas y las alinea con Flexbox -->
    <div class="cards-container">

        <!-- Tarjeta para Secretaria: Muestra un rol específico -->
        <div class="card-uno">
            <div class="card-header">
                <h3>Secretaria</h3> <!-- Título de la cabecera -->
            </div>
            <div class="card-body">
                <div class="rol-subtitulo">Inicie Sesión</div> <!-- Subtítulo con instrucción -->
            </div>
            <div class="card-footer">
                 <!-- Enlace estilizado como botón que lleva a login-doctor.php -->
                 <a href="login-doctor.php" class="btn-ingresar">Ingresar</a>
            </div>
        </div>

        <!-- Tarjeta de ejemplo simple (segunda tarjeta, sin contenido significativo) -->
        <div class="card-uno">
            <div class="card-header">
                sotelo <!-- Texto simple en lugar de encabezado -->
            </div>
            <div class="card-body">
                saul <!-- Texto simple en el cuerpo -->
            </div>
            <div class="card-footer">
                suastegui <!-- Texto simple en el pie -->
            </div>
        </div>

        <!-- Tarjeta para Doctor: Similar a la primera pero con botón en lugar de enlace -->
        <div class="card-uno">
            <div class="card-header">
                <h3>Doctor</h3> <!-- Título de la cabecera -->
            </div>
            <div class="card-body">
                <div class="rol-subtitulo">Inicie Sesión</div> <!-- Mismo subtítulo -->
            </div>
            <div class="card-footer">
                <!-- Botón que al hacer clic muestra alerta -->
                <button class="btn-ingresar" onclick="alert('Acceso Doctor')">Ingresar</button>
            </div>
        </div>

        <!-- Tarjeta para Estadísticas: Muestra datos numéricos -->
        <div class="card-uno">
            <div class="card-header">
                <h3>Estadísticas</h3> <!-- Título relativo a datos estadísticos -->
            </div>
            <div class="card-body">
                <!-- Contenedor con dos estadísticas: usuarios y visitantes -->
                <div class="stats-container">
                    <div class="stat-item">
                        <div class="stat-number">44</div> <!-- Número grande -->
                        <div class="stat-label">User Registrations</div> <!-- Etiqueta descriptiva -->
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">65</div>
                        <div class="stat-label">Unique Visitors</div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <!-- Botón de acceso general -->
                <button class="btn-ingresar" onclick="alert('Acceso General')">Ingresar</button>
            </div>
        </div>

    </div>
</body>

</html>

📚 

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más