Challenge: Apply Flexbox Concepts
Let's explore the power of flexbox by creating a shop card with a product image, some description, and the price. By default, all the elements are stacked in a column, one below the other. However, our goal is to change this behavior using flexbox.
Task
Consider the following HTML structure:
<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>
The task is to modify the CSS to achieve the following:
- Identify the parent element containing both the product image (
img
tag with theproduct-image
class) and product information (div
tag with theproduct-info
class). - Apply flexbox to the identified parent element (the
div
tag with theshopping-card
class). - Vertically center the items within the shopping card.
index.html
index.css
- Apply
display: flex;
to the parent element with the classshopping-card
. - The default flex direction is row, so there is no need to change the value of the
flex-direction
property. - To center items vertically, use
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
Pregunte me preguntas sobre este tema
Resumir este capítulo
Mostrar ejemplos del mundo real
Awesome!
Completion rate improved to 2.5
Challenge: Apply Flexbox Concepts
Desliza para mostrar el menú
Let's explore the power of flexbox by creating a shop card with a product image, some description, and the price. By default, all the elements are stacked in a column, one below the other. However, our goal is to change this behavior using flexbox.
Task
Consider the following HTML structure:
<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>
The task is to modify the CSS to achieve the following:
- Identify the parent element containing both the product image (
img
tag with theproduct-image
class) and product information (div
tag with theproduct-info
class). - Apply flexbox to the identified parent element (the
div
tag with theshopping-card
class). - Vertically center the items within the shopping card.
index.html
index.css
- Apply
display: flex;
to the parent element with the classshopping-card
. - The default flex direction is row, so there is no need to change the value of the
flex-direction
property. - To center items vertically, use
align-items: center;
.
index.html
index.css
¡Gracias por tus comentarios!