Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Flexbox | Flexbox
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

bookChallenge: 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 the product-image class) and product information (div tag with the product-info class).
  • Apply flexbox to the identified parent element (the div tag with the shopping-card class).
  • Vertically center the items within the shopping card.
html

index

css

index

js

index

copy
  • Apply display: flex; to the parent element with the class shopping-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;.
html

index

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 6
some-alt