Help with flexbox :(

Hi all,

Hope someone can help me, I’m trying to use flex to create a layout with box’s. although when I add any content to a box it pushes it all out align. Am I doing something wrong?

p.s it took me ages to get the content inside the div aligned up haha

Here is my site Read-Only:

1 Like

Do you want the boxes to be the same width height?

Try using ONE class for box 1 box 2 box 3 etc…because you want all those four boxes to be the same: 50% Width / 100% height. And they are in the same “parent” container , a " Content Block".

And this is tipycally a layout that would be easier to create with grid. Hope that helps !

You didn’t give any width or height to these boxes that’s why they react strangely (I think). Try to name it Content Block Box and give it 50% Width / 100% HEight.

THEN , if you want to have a bg image ton one , you can add a second class to this particular box (example: “Content Block Box” + “2” )

And so your boxes have the same code characyteristics and for the “tiny differences” you had another class.

Yes I want he 4 boxes to all be the same size.

@leetch Thanks for response, I tried to add % to the boxes but wont let me?


A solution is to put all boxes in 1 content block. Make the content block a grid with 2 col and 2 row all 1fr. Set content block height to 100%.