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

To be honest when I initially had this idea I thought that having a something like :nth-in-flex-line() would solve all of my problems but after thinking about it for I while I felt that a pseudo-element made more sense semantically and covers some use-cases that a pseudo-selector would not.  

My thoughts behind a flex-line pseudo element what that it could work with the existing pseudo-selectors so that we don’t have to recreate the wheel so to speak. Also I would hate to have to learn a flex-flavor variant for each of the existing pseudo selectors.

Also, here is a use-case where a pseudo-element gives us an advantage over a pseudo-selector. 
Using the mark up below:
 <div class="flex-container">
  <div class="flex-item">I am flex item </div>
  <div class="flex-item">I am flex item </div>
  <div class="flex-item">I am flex item </div>
  <div class="flex-item">I am flex item </div>
  <div class="flex-item">I am flex item </div>
  <div class="flex-item">I am flex item </div>
  <div class="flex-item">I am flex item </div>
 </div>
Consider a situation where we would want to add an index to the end of each element that denotes its position in a flex line.  
In my opinion. I think the easiest way to do that would be with a pseudo-element:

 .flex-container::flex-line { 
  counter-reset: countItem;
 }
 .flex-container::flex-line >  .flex-item{ 
  counter-increment: countItem; 
 }
 .flex-item:after { 
  content: counter(countItem);
 }
Having a pseudo-element allows us to reset the counter for each line thus allowing the numbering to be dynamic for the flex items. 
I know that this is a fringe case (which borders on the edge of 'should we really be doing that with CSS?') but it is the best example I could come up with on the fly that accurately depicts that limitations of a pseudo-selector based solution. 

I can't stress enough that it is the ability to target a flex-line that I feel is important.

Hope this example helps!

-KM


-----Original Message-----
From: Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Wednesday, April 08, 2015 8:27 PM
To: Kenneth Moore
Cc: www-style@w3.org
Subject: 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 22:21:57 UTC