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 4. Kapitel 7
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
Awesome!
Completion rate improved to 2.5Challenge: 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 4. Kapitel 7
