I've got some short flexbox items and some long/tall items in a multi row (flex-wrap) container with flex-direction: row.
Depending on which row they appear in, I'd like to align the short items differently:
- if on first line (not wrapped), I'd like to have them like
align-self: start - if on last line, I'd like to have them like
align-self: end - if in one of the middle rows, I'd like them
align-self: center
Is there a way of achieving this?
In the following image, I've align-content: center on all items, and manually added align-self start/end to the two short items with the colored background.. I'd like the ones with the red text to follow the ones with the colored background:
