Course Content
CSS Fundamentals
CSS Fundamentals
Challenge: Flexbox
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:
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
index
index
- 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
index
index
Everything was clear?