Menu
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.
617
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.
Justify ContentFlex Start positions element at the start of the page. Flex End sets the element to the end of the page. Space Around arranges the items evenly but with spaces between them. The spaces will be equal among all the elements inside a flex-box container, but not outside them.
The order property changes the default ordering of flex items that we define with flex-direction and flex-flow . It only affects the visual rendering of the items, so it doesn't affect the way how screen readers and other non-CSS user agents read the source code.
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:
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
