Box not in middle

  • pinksaltwhitepepper-1350567777194348716

    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.
    1350567778331000842-Screen_Shot_2025-03-15_at_4.26.41_PM.png
    1350567778788184096-Screen_Shot_2025-03-15_at_4.27.06_PM.png
  • whitep4nth3r-1350570636631871540

    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/
  • whitep4nth3r-1350573264358867005

    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.
  • lucasg-1350575931562917898

    Lucas G

    1 month ago

    this?
    1350575931189756046-tiles.gif
  • whitep4nth3r-1350576320576487635

    salma

    1 month ago

    There you go!
  • Thanks @Lucas G I wasn’t at a computer 😅
  • whitep4nth3r-1350576550931599370

    salma

    1 month ago

    To confirm this is what Lucas is demonstrating
  • lucasg-1350576636982067291

    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
  • whitep4nth3r-1350576902452281408

    salma

    1 month ago

    The problem with CSS is there are too many ways to achieve one thing
  • lucasg-1350577344729055343

    Lucas G

    1 month ago

    Well I wouldn't necessarily call it a problem but yeah, can confuse people sometimes
  • whitep4nth3r-1350577508675752117

    salma

    1 month ago

    A glass half full kinda person I see 😉
  • lucasg-1350577542180110407

    Lucas G

    1 month ago

    🙂
  • pinksaltwhitepepper-1350599586527576074

    PinkSaltWhitePepper

    1 month ago

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

    Tod

    1 month ago

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

    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
    1350600318232039495-Screen_Shot_2025-03-15_at_6.41.07_PM.png
    1350600318735482880-Screen_Shot_2025-03-15_at_6.41.23_PM.png
  • lucasg-1350602460821196862

    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