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

Conteúdo do Curso

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

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7
some-alt