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

book
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:

html

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.html

css

index.css

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.html

css

index.css

copy

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 6

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

some-alt