¿Por qué en un caso quité flex y en otro lo puse?

 

¿Por qué en un caso quité flex y en otro lo puse?

Caso 1 (título + tabla sin card) - QUITÉ flex:

css
.container {
    /* display: flex;  ← LO QUITÉ */
    padding: 20px;
}

Motivo: Los elementos (<h2> y <table>) debían ir UNO DEBAJO DEL OTRO (vertical).
Sin flex, por defecto son block y se apilan verticalmente.

Caso 2 (card centrada) - PUSE flex:

css
.contenedor-card {
    display: flex;        /* ← LO PUSE */
    justify-content: center;  /* Centra horizontalmente */
    padding: 30px 20px;
}

Motivo: Queremos centrar la CARD (un solo elemento) horizontalmente.
Flex es perfecto para centrar un elemento hijo.

DOCUMENTACIÓN COMPLETA DEL CÓDIGO

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card con Tabla - Explicada</title>
    <style>
        /* ========== ESTILOS GLOBALES ========== */
        body {
            margin: 0;              /* Quita márgenes por defecto */
            padding: 0;             /* Quita padding por defecto */
            background: #ddd;       /* Fondo gris claro */
            font-family: Arial, sans-serif;  /* Fuente para todo */
        }

        /* ========== MENÚ DE NAVEGACIÓN ========== */
        ul {
            list-style-type: none;  /* Quita los puntos de la lista */
            margin: 0;              /* Quita margen por defecto */
            padding: 0;             /* Quita padding por defecto */
            background-color: #333333;  /* Fondo gris oscuro */
            
            /* FLEX: hace que los <li> estén en HORIZONTAL */
            display: flex;          
        }

        /* Estilos para los enlaces del menú */
        ul li a {
            display: block;         /* Hace todo el área clickeable */
            color: white;           /* Texto blanco */
            text-align: center;     /* Texto centrado */
            padding: 14px 16px;     /* Espaciado interno */
            text-decoration: none;  /* Quita subrayado */
        }

        /* Efecto al pasar el mouse */
        ul li a:hover {
            background-color: #111111;  /* Fondo más oscuro */
        }

        /* ========== CONTENEDOR DE LA CARD ========== */
        .contenedor-card {
            /* FLEX: para CENTRAR la card horizontalmente */
            display: flex;          
            justify-content: center; /* Centra horizontalmente */
            
            /* NOTA: Al tener UN SOLO elemento (la card), 
               flex lo centra perfectamente */
            
            padding: 30px 20px;     /* Espacio alrededor de la card */
        }

        /* ========== LA CARD ========== */
        .card {
            /* === ESTILOS VISUALES DE LA CARD === */
            background: white;                  /* Fondo blanco */
            width: 450px;                       /* Ancho fijo */
            padding: 25px;                       /* Espacio interno */
            border-radius: 10px;                 /* Bordes redondeados */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Sombra suave */
            
            /* === GRID: ORGANIZACIÓN INTERNA === */
            display: grid;                       /* Activa Grid */
            grid-template-columns: 1fr;          /* UNA sola columna */
            gap: 20px;                            /* Espacio entre elementos */
            
            /* EXPLICACIÓN GRID:
               - 1fr = 1 fracción (ocupa todo el ancho)
               - Los hijos directos (h2 y table) se apilan verticalmente
               - gap crea 20px de separación entre ellos
            */
        }

        /* ========== TÍTULO DENTRO DE LA CARD ========== */
        h2 {
            color: #333;                /* Texto gris oscuro */
            margin: 0;                   /* Quita margen por defecto */
            text-align: center;          /* Centra el texto */
            font-size: 22px;             /* Tamaño de fuente */
            border-bottom: 2px solid #4CAF50;  /* Línea verde abajo */
            padding-bottom: 10px;         /* Espacio debajo del texto */
        }

        /* ========== TABLA DENTRO DE LA CARD ========== */
        table {
            width: 100%;                  /* Ocupa todo el ancho de la card */
            border-collapse: collapse;    /* Junta los bordes de celdas */
            border: 1px solid #ddd;       /* Borde gris claro */
        }

        /* Estilos para celdas de encabezado */
        th {
            background-color: #4CAF50;    /* Fondo verde */
            color: white;                  /* Texto blanco */
            padding: 12px;                  /* Espaciado interno */
            text-align: left;               /* Texto alineado izquierda */
        }

        /* Estilos para celdas normales */
        td {
            padding: 10px;                  /* Espaciado interno */
            border: 1px solid #ddd;         /* Borde gris claro */
        }

        /* Filas pares (2da, 4ta, etc.) con fondo gris */
        tr:nth-child(even) {
            background-color: #f2f2f2;      /* Fondo gris muy claro */
        }
    </style>
</head>
<body>
    <!-- MENÚ -->
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
        </ul>
    </nav>

    <!-- CONTENEDOR: usa FLEX para centrar la card -->
    <div class="contenedor-card">
        
        <!-- CARD: usa GRID para organizar título y tabla -->
        <div class="card">
            <h2>TH elements define table headers</h2>
            
            <table>
                <tr>
                    <th>Person 1</th>
                    <th>Person 2</th>
                    <th>Person 3</th>
                </tr>
                <tr>
                    <td>Emil</td>
                    <td>Tobias</td>
                    <td>Linus</td>
                </tr>
                <tr>
                    <td>16</td>
                    <td>14</td>
                    <td>10</td>
                </tr>
            </table>
        </div> <!-- Fin card -->
        
    </div> <!-- Fin contenedor-card -->
</body>
</html>

RESUMEN: ¿Flex o no Flex?

Situación¿Usar Flex?¿Por qué?
Varios elementos que queremos VERTICALMENTE❌ NOUsar block (por defecto)
Centrar UN elemento✅ SÍFlex centra fácilmente
Elementos en HORIZONTAL✅ SÍFlex dirección row
Organizar contenido DENTRO de la card❌ NOUsamos Grid

Visual de las cajas:

text
┌─────────────────────────────────────┐
│ [Home][News][Contact][About]        │ ← MENÚ (flex)
├─────────────────────────────────────┤
│                                     │
│   ┌───────────────────────────┐    │ ← CONTENEDOR-CARD (flex)
│   │                           │    │   (centra la card)
│   │  TÍTULO                    │    │
│   │                           │    │
│   │  ┌─────────────────────┐  │    │ ← CARD (grid)
│   │  │ TABLA               │  │    │   (organiza adentro)
│   │  └─────────────────────┘  │    │
│   │                           │    │
│   └───────────────────────────┘    │
│                                     │
└─────────────────────────────────────┘

¿Queda claro por qué usamos flex en el contenedor-card pero no dentro de la card?

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