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.
@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...
@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