Does anyone know of a #CSS-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.
@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
@joepie91 aka CSS variable (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)