Flexbox Help on a test layout

HTML-CSS
1

Hi folks,

I am coding out a test layout but I am stuck. I have a thumbnail and then content wrapped in their own divs but the div for thumbnails is massive. I have tried shrink and grow in flexbox but I am lost:

http://jsfiddle.net/trk5d1fx/

That is my fiddle - can someone point me in the right direction?

Cheers

2

How do you want it to be laid out?

3

So that you have the :slight_smile:

1st article with the image left and content right

2, article content left and image on the right

This is done but the image doesn’t need to take up all the space :slight_smile:

4

So how exactly do you want the other content, besides the image, to be arranged?

Edit: Basically, right now your .post-body container has two child elements: .the-thumnail and .post-content. Because .post-body is a flex container, it is dividing the container for those children. So the thumbnail isn’t big, it’s just being allocated the same height as the tallest sibling element, `.post-content’. There are various ways to fix this, but it depends on how you want the content to be displayed.

1 Like
5

Thanks for your awesome help. I have just figured it out with reading this doc:

https://forum.freecodecamp.org/t/css-flexbox-tips-and-tricks/16669

Which I have read before just needed a lightnbulb to click :flashlight:

Here is a short video of what I was trying to achieve:

https://streamable.com/71r98

Thank you again for your help, it is what makes FreeCodeCamp the awesome place it is :wink:

6

Also updated this too:

http://jsfiddle.net/trk5d1fx/10/

For you to look at :slight_smile: