Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Work with 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: Work 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.
html

index

css

index

js

index

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

index

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 7
some-alt