Conteúdo do Curso
CSS Fundamentals
CSS Fundamentals
Challenge: 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 thepost-image
class name) and post information (div
tag with thepost-info
class name). - Apply flex properties to the parent element (
div
tag with theblog-card
class name). - Horizontally center the items within the card.
- Ensure that items cover the entire height of the card.
index
index
index
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
index
index
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 4. Capítulo 7