- From: François REMY <francois.remy.dev@outlook.com>
- Date: Tue, 7 Oct 2014 21:24:24 +0200
- To: "'Tab Atkins Jr.'" <jackalmage@gmail.com>, "'fantasai'" <fantasai.lists@inkedblade.net>
- CC: <www-style@w3.org>
> This *particular* case can be viewed as a Grid issue,
> but there are other very closely related cases that are
> clearly Flexbox, and so this should still be solved in Flexbox.
>
> I came up with a fix for this in Flexbox, and plan to put it into
> level 2 - we need a property that, when flipped on, generates
> "phantom" boxes on the last line (or maybe all lines,
> controllable with the property) with a size equal to the average
> size of everything else on the line, and generates enough to fill
> up the empty space.
>
> Then you do layout normally, and remove the phantom boxes
> afterwards. This produces good alignment and flexing behavior
> on the last line regardless of how many items there are.
I think your solution works in more edge cases, but a simple ".container { margin-right: -15px; } .item { margin-right: 15px }" (which would set a minimum width for the generated gaps) could solve the problem in simple cases, in combination with a "justify-content-last: flex-start" equivalent of "text-align-last: start" (for which Zoltan and I provided patches for webkit/blink last year, but which seems to have landed behind some disabled CSS3_TEXT flag, sadly).
> That said, I'm pretty sure we also need to address this kind of thing
> for Grid. I'm pretty sure that when we add row-gap/column-gap,
> we'll need some automatic behavior matching the align-content
> keywords, like you suggest here.
>
> What's the problem with the first item that you mention?
>> "Size grid columns to >= multiples of X"
My interpretation of this first issue is that you can't have the equivalent of "columns: 500px" in CSS Grid.
Optimally, I think we want something like "columns: minmax(500px, 1fr)" or something along the lines I proposed in my previous mail.
Received on Tuesday, 7 October 2014 19:24:51 UTC