How to target the last element before break occurs in a flexbox design?

Question

Imagine this layout:

[BOX]  [BOX]  [BOX]
[       BOX       ]

Which is a flexbox design, and – if the screen shrinks – will look like this:

[  BOX  ] [  BOX  ]
[       BOX       ]
[       BOX       ]

And would become a set of 4 rows if the screen is too narrow to display even two boxes next to one another.

So far so good.

I am looking for a way to target the last element in the upper row, no matter how the flexbox has currently adjusted to its environment.

Naturally i thought of CSS pseudo-classes, but i was unable to find anything other than the typical ones, such as :last-child and :last-of-type or :nth-child, which would not help in this situation.

QUESTION

Is there a way to do this purely in CSS? If yes, how?

Answer 1

You could conceivably use a media query to target the second item after the subsequent items have wrapped. Barring that option, it's not possible with CSS.

Wrapping is not a behavior that is tracked by CSS. For example, a container has no idea when its children wrap. Therefore, there is no way to target items with CSS based on wrapping scenarios (except with media queries, as mentioned above).

More details here: Make container shrink-to-fit child elements as they wrap