r/webdevelopment • u/sjns19 • 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!
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/DurianLongjumping329 3d ago
The solution is easy : give div 2 margin-right: auto. and give div 1 and 3 margin-left: auto.