Reputation: 1
I am adjusting a suggestions box on a website which shows up when using the search function. It can display a maximum of 12 suggestions but depending on the search it can show 1, 2, 3, 4 etc at a time.
I am experiencing a gap I would like to resolve on the right of these suggestions when they break to a new line.
I am using flex
and flex-wrap
so when the elements hit the right edge it goes onto the next line and it being responsive depending on screen size. However there is always a gap on the furthest right when elements do break to the next line.
So I thought of using justify-content: space-around/space-between/space-evenly
which does a great job of sorting this gap out but only if the suggestions go down another level. If there are less suggestions, there is a massive gap between them to fill out the available space.
Less elements fill out all available space More elements sit nicer
So what I am trying to do is make the elements left align but not have the gap on the right when it breaks to a new line.
Please could anyone assist and if I would need to supply more information as this is my first question.
Upvotes: 0
Views: 11