Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Aplicar Conceptos de Flexbox | Dominio de Flexbox para Diseños
Fundamentos de CSS

bookDesafío: Aplicar Conceptos de Flexbox

Exploremos el poder de flexbox creando una tarjeta de tienda con una imagen de producto, una breve descripción y el precio. Por defecto, todos los elementos están apilados en una columna, uno debajo del otro. Sin embargo, nuestro objetivo es cambiar este comportamiento utilizando flexbox.

Tarea

Considera la siguiente estructura HTML:

<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

La tarea consiste en modificar el CSS para lograr lo siguiente:

  • Identificar el elemento padre que contiene tanto la imagen del producto (etiqueta img con la clase product-image) como la información del producto (etiqueta div con la clase product-info).
  • Aplicar flexbox al elemento padre identificado (la etiqueta div con la clase shopping-card).
  • Centrar verticalmente los elementos dentro de la tarjeta de tienda.
index.html

index.html

index.css

index.css

copy
  • Aplicar display: flex; al elemento padre con la clase shopping-card.
  • La dirección de flexión predeterminada es fila, por lo que no es necesario cambiar el valor de la propiedad flex-direction.
  • Para centrar los elementos verticalmente, utilizar align-items: center;.
index.html

index.html

index.css

index.css

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you show me the CSS code to apply these flexbox properties?

What will the layout look like after applying these changes?

Can you explain what each flexbox property does in this context?

Awesome!

Completion rate improved to 2.56

bookDesafío: Aplicar Conceptos de Flexbox

Desliza para mostrar el menú

Exploremos el poder de flexbox creando una tarjeta de tienda con una imagen de producto, una breve descripción y el precio. Por defecto, todos los elementos están apilados en una columna, uno debajo del otro. Sin embargo, nuestro objetivo es cambiar este comportamiento utilizando flexbox.

Tarea

Considera la siguiente estructura HTML:

<div class="shopping-card">
  <img src="link-to-image" alt="Analytics Machine" class="product-image" />
  <div class="product-info">
    <h3 class="product-title">Analytics Machine</h3>
    <p class="product-description">Bio Innovation</p>
    <div class="product-price">$10.00</div>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

La tarea consiste en modificar el CSS para lograr lo siguiente:

  • Identificar el elemento padre que contiene tanto la imagen del producto (etiqueta img con la clase product-image) como la información del producto (etiqueta div con la clase product-info).
  • Aplicar flexbox al elemento padre identificado (la etiqueta div con la clase shopping-card).
  • Centrar verticalmente los elementos dentro de la tarjeta de tienda.
index.html

index.html

index.css

index.css

copy
  • Aplicar display: flex; al elemento padre con la clase shopping-card.
  • La dirección de flexión predeterminada es fila, por lo que no es necesario cambiar el valor de la propiedad flex-direction.
  • Para centrar los elementos verticalmente, utilizar align-items: center;.
index.html

index.html

index.css

index.css

copy
¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 6
some-alt