I have a multiline flexbox container display: flex; flex-wrap: wrap. How can I apply a style or css class to the first item on each line?
The only thing I can come up with is to use Javascript to iterate over the items and manually apply/remove classes. I'd really like a pure css solution though.
I don't know how many items will be in the flex box ahead of time, or what their widths will end up being.
This is not possible with CSS.
Targeting the first item in each line of a multiline flex container, when the number of items in each line is unpredictable, is beyond the capabilities of CSS, because the first item in each line is arbitrary. It may be any item that places first.
At best, CSS can match a definite pattern. Without a pattern you'll need another technology.
Try JavaScript.
CSS Grid Layout has the same limitation:
