Does anyone know of a -only way to reorder the rows of items in flexbox, such that whichever row contains a specific item, is always the bottom row?

Similar to how on (older?) Windows versions, when you had multiple rows of tabs in a tab control, the bottom-most row would always be the one containing the currently-active tab, reordering the rows if necessary. :boost_requested:

@joepie91 Does it have to be Flexbox? It might be doable with grid and a custom property to place the active row at the bottom

@keithjgrant Flexbox is not a hard requirement; if it can be done with grids in a sensible manner (eg. it doesn't make tabs look weird) then that's totally fine too, as long as the tabs themselves can still be specified as a sequence of auto-sized items (ie. not needing to manually split tabs across lines).

Not sure I understand what you mean with a 'custom property' here though?

@keithjgrant Ah, right. I'm not sure how I would apply that to this problem, though?

The only implementation I can think of would be to give each line its own variable (containing ordering values) and then adjust those variables based on selection - but that would still require JS to update on tab selection, as well as manual line specification...

@joepie91 I was picturing some sort of ‘:has(:active)’ check, but I haven’t exactly thought through all the specifics

@keithjgrant Ahhh, I see what you mean. I think that would only work if there were a per-line container element, which I think is only possible when manually specifying lines? Or is there some way to automatically spawn a pseudo-element per line or so? I haven't quite gone this far into the weeds with grids before :p

· · Web · 0 · 0 · 0
Sign in to participate in the conversation
Pixietown

Small server part of the pixie.town infrastructure. Registration is closed.