Flexbox: align-self depending on row

1 week ago 9
ARTICLE AD BOX

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:

flexbox example

Read Entire Article