All topics

Box not in middle

PinkSaltWhitePepper

1 month ago

I’m sure this is simple but I’m stuck. I want the third box to be right below the top row, not in the middle.

If I change the height it’s goes to where I want it but then the entire height is cut off right below the third image. I want the app I’m building to always take the full height but I want the next image to be right below the first two, not in the middle.

Pictures should explain I hope. Thanks.
salma

1 month ago

remove the min-height: 100% from the parent div element

I think that’s what’s doing it. You’re setting the whole div to height 100% which means the flex items inside it will attempt to fill 100% of the height.
This is a useful playground to learn about flex box

https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
salma

1 month ago

Oh I think you want to maintain the full height background colour. Wrap the parent in another div element, which is 100% height and has the background colour, and then style the boxes as you need independently of the background.
Lucas G

1 month ago

this?
salma

1 month ago

There you go!
Thanks @Lucas G I wasn’t at a computer 😅
@salma
Oh I think you want to maintain the full height background colour. Wrap the parent in another div element, which is 100% height and has the background colour, and then style the boxes as you need independently of the background.
salma

1 month ago

To confirm this is what Lucas is demonstrating
Lucas G

1 month ago

Just wrap the items in a div with flex-direction: row
The parent can keep the 100% min-height that way
salma

1 month ago

The problem with CSS is there are too many ways to achieve one thing
Lucas G

1 month ago

Well I wouldn't necessarily call it a problem but yeah, can confuse people sometimes
salma

1 month ago

A glass half full kinda person I see 😉
Lucas G

1 month ago

🙂
PinkSaltWhitePepper

1 month ago

thanks I had to start over but I got it like Lucas’s gif
Tod

1 month ago

Great energy @PinkSaltWhitePepper! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
PinkSaltWhitePepper

1 month ago

is there a way to do center top alignment but have the next row item start on the left not the middle?

or do top left alignment but have it be centered and not leaning to the left by a smidge

the second seems easier but i can’t figure out why there’s extra room on the right
Lucas G

1 month ago

You’re relying too much on this specific width. That space will exist at different devices and it’ll vary depending on the device
It’s the gap spacing
For what you’re trying to do, I’d go with grid instead of flexbox
💯1

Box not in middle

PinkSaltWhitePepper

salma

salma

Lucas G

salma

salma

Lucas G

salma

Lucas G

salma

Lucas G

PinkSaltWhitePepper

Tod

PinkSaltWhitePepper

Lucas G