CSS FLEX — Manage free space left after wrap
I have a flex defined like seen here: https://codepen.io/Jazzigula/pen/jOdYyYp
At the moment the flex wraps its width doesn't automatically shrink further to the intrinsic size based on the flex items now stacked one on top of the other, but the flex container rather keeps that breakpoint width leaving the empty space on the side.
Is there a way to eliminate that free space but to keep items flush left?
The only way I know to manage the spacing between the items on the main flex axis is through justify-content and margins. But can't find a way to achieve this 🙂 Thanks
18 Replies
It'a a bit clear for me to understand what you want to acchieve. Can you make a little sketch of what the result should be?
Here is the situation right after the flex wraps. It leaves a free space on the side. I would like this space to be eliminated and that flex follow the intrinsic size of the new content order
I can push the items on the right with the margin-left:auto; but then items are not flushed to the left
Thanks Mark. However, this makes items grow and take the free space, and I would like items to keep their size, and that flex shrinks to their size
then i don't gate it. so you want the container to shrink?
Yes, to the width of "ICONS LANGUAGE" item
to shrink instantly after the wrap
so not when it is full width? (before the wrap)
I guess I am making some wrong assumptions about how flex works. But I would like the container to be the size of the items always if possible 🙂
So let's say there are two items one 200px and the other 400px width.
I set flex-flow: row wrap;
When the viewport hits the 200+400=600px it wraps. So after the wrap the container is 599px, but I would like it instantly to shrink to 400px since it is the width of the wider item.
no, I don't think it is possible. think the container needs to know how wide the children are, and the other way round. it can not be both. So you'll have to use a media query
leave the post open, maybe someone else comes up with an idea that I missed
yeah, flex lets you use the container to control the size of children dynamically, you can't then also have the children control the parent
(though also 100% still this)
i was thinking of float
Oh no floats, I am afraid 🙂
Kidding, but I am a begginer, if it works why not. Just can't imagine that solution
yea, not ideal. rather use a media query
especially if you know the size of the items inside with some certainty
Do you think that container query could help. I stumble upon it while digging the solution
works too, but still you need to know the breakpoint
Now I see the logic of why it doesn't work. This is very helpful because I always wonder if I might be missing something very basic. I'll try in this direction then, thanks a bunch once again!
np, you're welcome. good luck on the project!
Thanks!