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

On Thu, Mar 26, 2015 at 1:45 PM, Kenneth Moore
<kenneth.moore@ungerboeck.com> wrote:
> 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?

So you hint at some use-cases here; this is the most important part!

One use-case is styling the first/last flex items in a given line
differently; I think this speaks for itself, as using
:first-child/:last-child to do this sort of thing in current CSS is
pretty common.

Another I could think of is styling the flex items differently based
on what line they show up in, similar to ::first-line on text.  For
example, you could align the first line differently, or bold
everything in the first line, etc.

Unlike ::first-line, though, we have a much saner markup structure.
Flex items are wholely within one line or the other.  So, we probably
don't need an actual pseudo-element; we can just use the existing
elements, and thus use a pseudo-class instead, similar to the
:nth-col() pseudos that select table cells based on their column.

So I'm thinking maybe two pseudo-classes, one for selecting a flex
item based on what line its in, and one for selecting a flex item
based on its index within a line.  Let's call the first
`:nth-flex-line(<an+b>)`, and the second `:nth-in-flex-line(<an+b>)`
(and probably the "nth-last" variants of both).

This unfortunately has the same circularity problems as ::first-line
(setting styles can change what content fits on the first line), but I
think that's really just two-pass.  Or rather, the :nth-flex-line()
one is sane-ish there; you just style all the elements initially as if
they're in the first line, then line-break, then style the remaining
ones as if they're in the second line, then line-break, etc.  It's
slower, but not insane.  It might make sense to have *only* first/last
lines here, to minimize the degree of re-layout; that should capture
the vast majority of use-cases I reckon.

But :nth-in-flex-line() is harder - styling the last-child, for
example, can affect whether or not the element even fits on the line
anymore.  Theoretically it can make *all* the elements no longer fit -
imagine a line like `:nth-last-in-flex-line(1) { width: 200vw; }`, so
every element you try to apply it to now gets too wide for the
flex-line.  This would stabilize on only one element per line (after
attempting to do styling on each element on the line, then realizing
they have to wrap to the next).  This might be too expensive to deal
with reasonably. :(

~TJ

Received on Thursday, 9 April 2015 01:28:12 UTC