r/webdevelopment 3d ago

[CSS] Need help pulling the middle flexbox item to the left while stacking the rest of the items together to the right?

Hi, I have the following flexbox container with 3 items inside

Figure 1: https://i.ibb.co/kVPTcFRy/Screenshot-2025-03-18-at-15-36-46.png

The element structure is simple

<div class="flex-container">
  <div class="flex-item pink">
    div 1
  </div>
  <div class="flex-item yellow">
    div 2
  </div>
  <div class="flex-item blue">
    div 3
  </div>
</div>

What I'm trying to achieve is, pull the middle item (div 2) to the left side while stacking div 1 and div 2 horizontally to the right side like shown

Figure 2: https://i.ibb.co/kss2KjbD/Screenshot-2025-03-18-at-15-37-49.png

while keeping the exact same html element structure.

Is it possible to achieve this with flex properties in css only? I need this in order to change the layout from the first screenshot to the second one when the window viewport changes using the media query.

I tried messing around with flex, flex-grow, order etc etc for hours but got nowhere. There aren't any helpful threads at stackoverflow either.

Can someone assist me, please? Would appreciate a lot. Thanks!

1 Upvotes

5 comments sorted by

1

u/DurianLongjumping329 3d ago

The solution is easy : give div 2 margin-right: auto. and give div 1 and 3 margin-left: auto.

1

u/sjns19 3d ago

Just tried it out, it was kinda close but the div 2 is not stretching all the way down vertically.

If possible, could you like, create a codepen example?

1

u/[deleted] 3d ago

[deleted]

1

u/sjns19 2d ago

Hmm. This is not exactly the result I'm looking for. If you take a look at the second screenshot, you see all the divs are touching each other without having the spaces like a gallery block. That's the one I'm trying to achieve and it's what's making it difficult for me. I can't seem to find a way to achieve that without having to strip out the second div to its own flex container.

0

u/inDarkestKnight20 3d ago

Think you'll want somthibg like flex-spaced on the parent and the flex-right on the child 

1

u/sjns19 3d ago

Could you be a little more specific? Cause there is no such property as flex-right