I believe that flexbox specification is omitting a very useful feature, as it does not include the ability to target ‘flex-lines’ within a multiline flex container (from a CSS rule).
To accomplish this the flexbox spec could include a new flex-line pseudo-element. I imagine the implementation would be similar to the pattern used by the ‘first-line’ pseudo-element. But, a flex-line pseudo-element would have to target
each flex-line, not just the first.
Selects each flex-line within a flex container
.flex-container::flex-line > .flex-item:first-child
Selects the first flex-item of each flex-line
.flex-container::flex-line > .flex-item:last-child
Selects the last flex-item of each flex-line
It could also work with other pseudo-selectors for added utility:
Selects even flex-lines
Selects every flex-line except the first
Flex-box spec claims that it that ‘flex lines are hypothetical containers used for grouping and alignment by the layout algorithm’. It kind of makes sense that a hypothetical container would be a pseudo-element.
This would be very useful in situations where you are applying a border and border-radius to a series flex items that could wrap. There are many design patterns that make use of “:first-child” and “:last-child” to prevent borders from stacking
and to set an appropriate border-radius on edge elements. These design patterns even apply to flex based layouts. Since flexbox solves so many CSS layout issues I figure It could also solve something that is nearly impossible to do as of now. Is this a feature
User Experience Designer
Ungerboeck Software International
Kenneth.Moore <at> Ungerboeck.com