Flexbox w/ justifyContent: 'space-between'
Hello! I'm attempting a status page where these device status are aligned to the right of the device name. Once they touch eachother, all three should drop down to the second row via wrap. The problem I'm running into is that the word Maintenance is longer than the other two, so it drops earlier. How can I make them drop at the same time without messing up the spacing so that it is "end" for justifyContent when it doesn't wrap?
26 Replies
I dont understand what you want to achieve
I considered doing padding to drop it down but ran into this extra space on the left.
As seen on Online here.
@lko Sorry, it's a bit hard to explain.
I'm trying to have it drop all three to the second row at the same time.
As opposed to only maintenance (since it has longer text)
Oh ok
And you want to do it only if maintenance is below or always?
Should show on the right until the screen gets smaller and touches the two if that makes sense.
So either of these two are good.
But the one where only Maintenance is dropped is bad.
just use flex direction column
so they're always stacking one on top of the other
Ah, the designer likes it to the right at larger screen sizes.
I think I have an idea of adding a width to each of the status texts.
The only problem with this method is that adding width adds extra space here:
Where the red circles are.
You could use
@container queries
https://caniuse.com/css-container-queries
And use justify-content: space-between and then when the container reaches X of width, flex-direction: columnI'm pretty sure you can't just use the flex-wrap property and you would need to rely on javascript to achieve what you want
or use media query
to change the flex direction
@Mannix Interesting. Is this because this is the intended behavior of flexWrap?
well you want them to wrap all at the same time and flex-wrap will work for each card individually
That makes sense.
If only the words were the same length. :facepalm_laugh:
hmm maybe a min-width of the longest word could make them wrap all at the same time
but you would also need to add text-align: right
so you don't get that empty space on the right side of the word
that would make the most sense yes. I imagine there is a set amount of possible statuses. OP already knows what the longest word possible is. use a min-width set in ch units
i was playing with a hacky subgrid way, but to many caviats, and still need of container queries
Yeah, I was considering grid as well.
(removed URL)
Here's what I have so far...
I used media query to drop it down, but I might try your ch units method.
Since the xs size is still doing the drop oddly.
Granted, I'm not sure how many people are viewing our site at lower than 250px width. lol
on xs I don't mind it too much tbh. the cards are below eachother, so they don't have to lign up imo
That's true.
You may only see one card on your screen at a time too.
Do you think your ch unit method would provide a better result than this?
Or just overengineering?
incase you have a different font, it could be easier, (possibly) no need to recalculate it
but how it is now, i think it looks pretty fine
Cool, I appreciate your help!
How good do you need browser support to be ? I’m thinking container queries.