Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Challenge: Build a Layout with Flexbox | Mastering Flexbox for Layouts
CSS Fundamentals

bookChallenge: Build a Layout with Flexbox

Task

Let's create a blog card. We need to change the default positioning behavior with the help of flex.

The task is to:

  • Identify the parent element containing both the post image (img tag with the post-image class name) and post information (div tag with the post-info class name).
  • Apply flex properties to the parent element (div tag with the blog-card class name).
  • Horizontally center the items within the card.
  • Ensure that items cover the entire height of the card.
index.html

index.html

index.css

index.css

copy
  • display: flex; can only be applied to the parent element.
  • The default flex direction is row, so we need to change it using the flex-direction: column; property.
  • To center items horizontally, use align-items: center;.
  • To space items vertically, use justify-content: space-between;.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.5

bookChallenge: Build a Layout with Flexbox

Glissez pour afficher le menu

Task

Let's create a blog card. We need to change the default positioning behavior with the help of flex.

The task is to:

  • Identify the parent element containing both the post image (img tag with the post-image class name) and post information (div tag with the post-info class name).
  • Apply flex properties to the parent element (div tag with the blog-card class name).
  • Horizontally center the items within the card.
  • Ensure that items cover the entire height of the card.
index.html

index.html

index.css

index.css

copy
  • display: flex; can only be applied to the parent element.
  • The default flex direction is row, so we need to change it using the flex-direction: column; property.
  • To center items horizontally, use align-items: center;.
  • To space items vertically, use justify-content: space-between;.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 7
some-alt