No CSS flexbox does not provide any kind of selector or property that can directly detect in which wrapped row an element appears. Flexbox does not expose row-number in order to target "First flex row" , "middle flex row" , "last flex row".

Instead of CSS :

This problem can be solved using the JavaScript, because only JS can read the actual layout.

A JS solution will:

1.Detect the Y-position(OffsetTop) of each item.

2.Then group items by each unique Y-position (each row).

3.Then apply classes:

Example:

const rows = {};

document.querySelectorAll('.item').forEach(e1=>{

const y = el.offsetTop;

if(!rows[y] rows[y] =[];

rows[y].push(el);

});

const rowKeys = Object.keys(rows).sort((a,b) => a-b);

rows[rowKeys[0]].forEach(el.classList.add('row-first'));

rows[rowKeys[rowKeys.length -1]].forEach(el => el.classList.add('row-last'));

rowKeys.slice(1, -1).forEach(key =>

rows[key].forEach(el => el.classList.add('row-middle'))

);

4.Use CSS to align them differently:

.row-first {align-self : flex-start; }

.row-middle {align-self : center ; }

.row-last {align-self : flex-end ; }