Desafí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 claseproduct-image
) como la información del producto (etiquetadiv
con la claseproduct-info
). - Aplicar flexbox al elemento padre identificado (la etiqueta
div
con la claseshopping-card
). - Centrar verticalmente los elementos dentro de la tarjeta de tienda.
index.html
index.css
- Aplicar
display: flex;
al elemento padre con la claseshopping-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.css
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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
Desafí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 claseproduct-image
) como la información del producto (etiquetadiv
con la claseproduct-info
). - Aplicar flexbox al elemento padre identificado (la etiqueta
div
con la claseshopping-card
). - Centrar verticalmente los elementos dentro de la tarjeta de tienda.
index.html
index.css
- Aplicar
display: flex;
al elemento padre con la claseshopping-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.css
¡Gracias por tus comentarios!