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
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Awesome!
Completion rate improved to 2.5
Challenge: Apply Flexbox Concepts
Svep för att visa menyn
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
Tack för dina kommentarer!