I have a horizontal, wrapping flexbox, like so:

.container {  display:        flex;  flex-direction: row;  flex-wrap:      wrap;}

The number of items per row will vary depending on the screen width, and the width of each item will vary as well.

I would like to add styling to only the first item of each flexbox row. Below is an illustration of what I'm looking for.

Example 1|--------|--------|--------||style me|        |        ||--------|--------|--------||style me|        |        ||--------|--------|--------||style me|        ||--------|--------|Example 2|--------|---|-----|------------||style me|   |     |            ||--------|---|-----|------------||  style me     |      |        ||---------------|------|--------|| style me |      ||----------|------|

How can I do this using Flexbox?

I still need the rows to wrap as the screen is resized, so I don't think I can use Grid. However, if it is possible to use Grid to solve this problem, that would be a good solution for me as well.

Update

This can be accomplished using CSS Grid and either the auto-fill or auto-fit values. See this question for details:

CSS grid wrapping