W3C home > Mailing lists > Public > www-style@w3.org > March 2015

[css-flexbox] Discussing the Addition of a '::flex-line' pseudo-element

From: Kenneth Moore <kenneth.moore@ungerboeck.com>
Date: Thu, 26 Mar 2015 20:45:44 +0000
To: "www-style@w3.org" <www-style@w3.org>
Message-ID: <BN3PR0701MB1314BDFF84472002A99DD89E9D080@BN3PR0701MB1314.namprd07.prod.outlook.com>
Good Afternoon,

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.

For Example:

*         .flex-container::flex-line

   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:

*         .flex-container::flex-line:nth-child(even)

   Selects even flex-lines

*         .flex-container::flex-line:not(:first-child)

   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 worth consideration?

Kenneth Moore
User Experience Designer
Ungerboeck Software International
Received on Thursday, 26 March 2015 20:46:18 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:49 UTC