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?
No description
No description
26 Replies
lko
lko8mo ago
I dont understand what you want to achieve
TRUEfoe
TRUEfoe8mo ago
I considered doing padding to drop it down but ran into this extra space on the left.
No description
TRUEfoe
TRUEfoe8mo ago
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)
lko
lko8mo ago
Oh ok And you want to do it only if maintenance is below or always?
TRUEfoe
TRUEfoe8mo ago
Should show on the right until the screen gets smaller and touches the two if that makes sense.
TRUEfoe
TRUEfoe8mo ago
No description
No description
TRUEfoe
TRUEfoe8mo ago
So either of these two are good. But the one where only Maintenance is dropped is bad.
lko
lko8mo ago
just use flex direction column so they're always stacking one on top of the other
TRUEfoe
TRUEfoe8mo ago
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.
TRUEfoe
TRUEfoe8mo ago
The only problem with this method is that adding width adds extra space here:
No description
TRUEfoe
TRUEfoe8mo ago
Where the red circles are.
lko
lko8mo ago
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: column
Mannix
Mannix8mo ago
I'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
TRUEfoe
TRUEfoe8mo ago
@Mannix Interesting. Is this because this is the intended behavior of flexWrap?
Mannix
Mannix8mo ago
well you want them to wrap all at the same time and flex-wrap will work for each card individually
TRUEfoe
TRUEfoe8mo ago
That makes sense.
TRUEfoe
TRUEfoe8mo ago
If only the words were the same length. :facepalm_laugh:
No description
Mannix
Mannix8mo ago
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
MarkBoots
MarkBoots8mo ago
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
TRUEfoe
TRUEfoe8mo ago
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
MarkBoots
MarkBoots8mo ago
on xs I don't mind it too much tbh. the cards are below eachother, so they don't have to lign up imo
TRUEfoe
TRUEfoe8mo ago
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?
MarkBoots
MarkBoots8mo ago
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
TRUEfoe
TRUEfoe8mo ago
Cool, I appreciate your help!
clevermissfox
clevermissfox8mo ago
How good do you need browser support to be ? I’m thinking container queries.
TRUEfoe
TRUEfoe7mo ago
@MarkBoots And we're live. https://quantumcomputinginc.com/technology/cloud-devices Thanks again!
Want results from more Discord servers?
Add your server