• Cuarzo.dev
  • Posts
  • Cómo hacer una Card (o tarjeta) con HTML, CSS Flexbox

Cómo hacer una Card (o tarjeta) con HTML, CSS Flexbox

Aprenderemos como crear tarjetas usando la tecnología de CSS Flexbox.

En esta clase vamos a aprender cómo crear tarjetas utilizando la tecnología de Flexbox. Este es un ejemplo típico cuando estamos diseñando sitios web y queremos mostrar contenido de forma organizada y estilizada.

Estructura HTML de la Tarjeta

Primero, necesitamos definir la estructura HTML de nuestra tarjeta. La tarjeta tendrá una clase card, y dentro de ella, un contenedor para el contenido (content) y un pie de página (footer).

<div class="cards">
    <div class="card">
        <div class="content">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nostrum voluptatibus dignissimos est veniam possimus, aperiam magnam earum modi officiis quae ipsa esse saepe neque voluptatum architecto? Ipsum, temporibus officiis.</p>
        </div>
        <div class="footer">
            <button>Submit</button>
        </div>
    </div>
    <div class="card">
        <div class="content">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut nostrum voluptatibus dignissimos est veniam possimus, aperiam magnam earum modi officiis quae ipsa esse saepe neque voluptatum architecto? Ipsum, temporibus officiis.</p>
        </div>
        <div class="footer">
            <button>Submit</button>
        </div>
    </div>
</div>

Estilos CSS para la Tarjeta

A continuación, vamos a añadir estilos a la tarjeta para que se vea bien y se comporte correctamente cuando haya múltiples tarjetas en la misma fila.

.cards{
    display: flex;
}

.card{
    flex: 50%;
    margin: 10px;
    border: 5px solid black;
    display: flex;
    flex-direction: column;
}

.card .content{
    flex-grow: 1;
    flex-shrink: 1;
}

.card .footer{
    background-color: grey;
    padding: 10px;
}

Explicación del Código CSS

  1. Contenedor de Tarjetas:

    • .cards usa display: flex para disponer las tarjetas una al lado de la otra.

  2. Tarjeta Individual:

    • .card se configura para ocupar el 50% del contenedor padre con flex: 50%.

    • Se añade margin y border para separación y visualización.

    • display: flex y flex-direction: column permiten que el contenido y el pie de página se dispongan verticalmente dentro de la tarjeta.

  3. Contenido de la Tarjeta:

    • .card .content usa flex-grow: 1 y flex-shrink: 1 para permitir que el contenido crezca y se reduzca según sea necesario, asegurando que el pie de página se mantenga en la parte inferior.

  4. Pie de Página:

    • .card .footer tiene un fondo gris y un padding para destacarse y separarse del contenido.

Conclusión

Hemos visto cómo crear tarjetas con Flexbox de una manera sencilla y efectiva. Esta técnica es muy útil para disponer contenido de forma organizada y responsiva en nuestras páginas web. Flexbox nos permite ajustar fácilmente la disposición de los elementos, asegurando una buena presentación sin importar la cantidad de contenido.

Suscríbete para seguir leyendo...

Este contenido es gratuito, pero debes estar suscrito a Cuarzo.dev para continuar leyendo.

Already a subscriber?Sign In.Not now

Join the conversation

or to participate.