forcefully make items wrap with flex-wrap
Hey, it's been a while since i've taken a look at anything frontend related, so i'd like to double check something.
given that you have some items in a flex container with
flex-wrap applied:
1. If you wanted to make a specific item wrap at a certain point/width, what would be the best practice for that again? i believe giving the item a min-width could cause problems as there's no value you could put that wouldn't potentially cause overflow? Unless that was the right method?
2. Following the previous question, if i wanted the items to begin wrapping/collapsing in general at a certain point, what would be the best practice for that one?
Thank you in advance.14 Replies
you're asking impossible hypotheticals
if you show what you're actually trying to do and what you have, that would help
sorry about that, here's an example https://codepen.io/deerCabin/pen/KKjJMRd. I'm aware the items here don't wrap due to the fact that there's no content to define the width etc. But regarding the questions, let's say i wanted the last box to wrap when when it's size shrinks to 300px, depending on the size of that value it could cause overflow on smaller devices since it can't shrink. I was wondering the best practice for doing that.
remove the
min-width, add flex: 300px 1 0;
or this:
this will say "you start at 300px, you can grow to more, but when it's time to be smaller than 300px, you're not allowed"
and that should wrap itah and that's because the
flex-shrink: 0; stops it from shrinking below 300px so it wraps? also i've noticed that it overflows when the screen is below 300px, i feel it's most likely because of the fixed unit but as i mentioned, i feel any value would do that, being em, rem etc? unless it's a codepen thing.
that's because it's smaller than 300px
and yes, it is because of
flex-shrink: 0alright i see, cool. So if i wanted to prevent the overflow would i have to sacrifice it wrapping at 300px since i assume i'd have to add a flex shrink?
yes, basically
or you could change this and use grid
or you can force it to be showing as columns
ah okay. When you say force it to be showing as columns what do you mean?
click on the symbol next to
display: flexthis?
and then i assume the grid alternative would be to use an auto fit/fill with minmax for the wrapping effect?
yes, that
try it
alright, thank you for your help 🙂
you're welcome
alternatively, use grid