Challenge: 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 (
imgtag with thepost-imageclass name) and post information (divtag with thepost-infoclass name). - Apply flex properties to the parent element (
divtag with theblog-cardclass name). - Horizontally center the items within the card.
- Ensure that items cover the entire height of the card.
index.html
index.css
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.css
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 33
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Fantastiskt!
Completion betyg förbättrat till 2.56Challenge: Build a Layout with Flexbox
Svep för att visa menyn
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 (
imgtag with thepost-imageclass name) and post information (divtag with thepost-infoclass name). - Apply flex properties to the parent element (
divtag with theblog-cardclass name). - Horizontally center the items within the card.
- Ensure that items cover the entire height of the card.
index.html
index.css
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.css
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 1. Kapitel 33
