Help with flexbox :(

Design help Layout & Design
1

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:

https://preview.webflow.com/preview/intranet-2b8fd3-765cc8e043fc9d6405ec1c2?utm_medium=preview_link&utm_source=designer&utm_content=intranet-2b8fd3-765cc8e043fc9d6405ec1c2&preview=d28075e811f86fc58b68dc5ce65fe1b2&workflow=preview

1 Like
2

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

3

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 !

4

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.

5

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?

Cheers

6

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%.